StoreManage
是一个轻量级的状态管理工具库
npm i @zqhexor/store-manage
defineStore(mouduleId, storeFunc)
-
mouduleId
string | symbol 模块唯一标志 -
storeFunc
function store定义函数其中用
ref
声明state
,computed
声明getter
,function
声明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,
};
});
直接引入 user.js 中的 useUserStore 对象,然后从中解构出想要的 state
, getter
, action
中使用,注意 state
是 ref
对象
<script setup>
import { useUserStore } from '@/store/user';
const userStore = useUserStore();
const { firstName, age, changeAge } = userStore;
firstName.value = 'Taylor';
const changeAge2 = () => {
userStore.changeAge();
};
</script>
使用辅助函数 mapState
来取 state
和getter
的值;
使用辅助函数 mapWritableState
来读写 state
的值;
使用辅助函数 mapActions
来取 action
的值;
其中第一个参数是 store
模块,
第二个参数:
- 不传: 全部取出来
- array:取指定 key 值数据
- object: 去指定值并改名{'old':'new'}
详细使用请参照 pinia 的 mapState
、mapWritableState
和 mapActions
方法。
<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>