@fesjs/plugin-vuex ​

TIP

vue3+ 官方推荐使用pinia,不在推荐使用 vuex。

└── src
 ├── pages
 │ └── index.vue
 └── stores
 │ └── foo
 │ │ └── bar.js
 │ ├── counter.js
 │ ├── plugin-logger.js
 │ ├── user.js
 └── app.js

TIP

为了防止fesjs与vuex的 export 冲突,fesjs 不提供导出 vuex 的任何 api。你可以直接使用 vuex 的 api

import{useStore}from'vuex';

{
"dependencies":{
"@fesjs/fes":"^3.0.0",
"@fesjs/plugin-vuex":"^3.0.0"
}
}

exportdefault{
vuex:{
strict:true,// 开启严格模式
},
};

exportdefault{
namespaced:true,
state:()=> ({
name:'aring',
age:20,
}),
actions:{
login(){
returnnewPromise((reslove)=>{
setTimeout(()=>{
console.log('login');
reslove('OK');
},1000);
});
},
},
modules:{
address:{
state:()=> ({
province:'广东省',
city:'深圳市',
zone:'南山区',
}),
getters:{
address(state){
returnstate.province+state.city+state.zone;
},
},
},
},
};

exportdefault{
namespaced:true,
state:()=> ({
count:0,
}),
mutations:{
increment(state){
state.count++;
},
},
getters:{
doubleCount(state){
returnstate.count*2;
},
},
actions:{
asyncIncrement({commit}){
setTimeout(()=>{
commit('increment');
},2000);
},
},
};

TIP

导出的mutations、actions和getter的事件类型,将会按文件命名;

如ACTION_TYPES.user.login指向 user 模块中 actions 的 login 方法

如GETTER_TYPES.user.address指向 user 模块中嵌套的 address getter

如MUTATION_TYPES.fooBar.increment指向 foo/bar 模块中 mutations 的 increment 方法

<template>
<div>
<h4>Vuex</h4>
<div><button:disabled="disabled"@click="login">async login</button></div>
<div>
<button@click="fooBarIncrement">foo/bar:{{ fooBarDoubleCount }}</button>
</div>
<div>{{ address }}</div>
</div>
</template>
<config>
{
 "name": "store",
 "title": "vuex测试"
}
</config>
<script>
import{computed,ref}from'vue';
import{useStore}from'vuex';
import{MUTATION_TYPES,GETTER_TYPES,ACTION_TYPES}from'@fesjs/fes';

exportdefault{
setup(){
conststore=useStore();
console.log('store==>',store);
constdisabled=ref(false);
// 可以利用导出的事件类型,不再通过字符传入(store.getters['user/address'])
return{
 address:computed(()=>store.getters[GETTER_TYPES.user.address]),
disabled,
login:()=>{
disabled.value=true;
store.dispatch(ACTION_TYPES.user.login).then((res)=>{
window.alert(res);
disabled.value=false;
});
},
fooBarIncrement:()=>store.commit(MUTATION_TYPES.fooBar.increment),// foo/bar目录会解析成驼峰fooBar
 fooBarDoubleCount:computed(()=>store.getters[GETTER_TYPES.fooBar.doubleCount]),
};
},
};
</script>

TIP

由于该插件注册在 onAppCreated 中,如果在 onAppCreated 及之前使用 useStore 时,获取不到 vuex 实例

fesjs导出了 vuex 实例store,如在 app.js 文件中

import{store,GETTER_TYPES}from'@fesjs/fes';
console.log(store.getters[GETTER_TYPES.user.address]);