Skip to content

zqhexor/store-manage

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

StoreManage 介绍

简介

StoreManage 是一个轻量级的状态管理工具库

安装

npm i @zqhexor/store-manage

使用 Composition API 结合 defineStore 来定义 Store

defineStore(mouduleId, storeFunc)

  • mouduleId string | symbol 模块唯一标志

  • storeFunc function store定义函数

    其中用 ref 声明 state, computed 声明 getterfunction 声明 action

// user.js
import { defineStore } from '@zqhexor/store-manage';
export const useUserStore = defineStore('user', () => {
  const firstName = ref('HexOr');
  const lastName = ref('Zeng');

  const age = ref(16);
  const getName = computed(() => {
    return `${firstName.value} ${lastName.value}`;
  });
  const changeAge = () => {
    age.value++;
  };
  return {
    firstName,
    lastName,
    getName,
    age,
    changeAge,
  };
});

Composition API 中调用

直接引入 user.js 中的 useUserStore 对象,然后从中解构出想要的 state, getter, action 中使用,注意 stateref 对象

<script setup>
import { useUserStore } from '@/store/user';

const userStore = useUserStore();
const { firstName, age, changeAge } = userStore;
firstName.value = 'Taylor';
const changeAge2 = () => {
  userStore.changeAge();
};
</script>

Option API 中调用

使用辅助函数 mapState 来取 stategetter 的值;

使用辅助函数 mapWritableState 来读写 state 的值;

使用辅助函数 mapActions 来取 action 的值;

其中第一个参数是 store 模块,

第二个参数:

  • 不传: 全部取出来
  • array:取指定 key 值数据
  • object: 去指定值并改名{'old':'new'}

详细使用请参照 piniamapStatemapWritableStatemapActions 方法。

<script>
  import { useUserStore } from '@/store/user';
  import { mapState, mapActions, mapWritableState } from '@zqhexor/store-manage';

  const userStore = useUserStore();

  export default {
    data() {
      return {}
    },
    computed: {
      ...mapState(userStore, ['age']),
      ...mapWritableState(userStore, {'age': 'age2'}),
    },
    methods: {
      ...mapActions(userStore, ['changeAge']),
      changeAge2() {
        this.age2 += 1;
      }
    }
  }
</script>