vuex 中插件的编写案例解析
一、官方文档
1、第一步
constmyPlugin=store=>{
//当store初始化后调用
store.subscribe((mutation,state)=>{
//每次mutation之后调用
//mutation的格式为{type,payload}
});
};
2、第二步
conststore=newVuex.Store({
//...
plugins:[myPlugin]
});
二、编写一个打印日志的插件
1、函数的书写
import_from'lodash';
functionlogger(){
returnfunction(store){
letprevState=store.state;
store.subscribe((mutations,state)=>{
console.log('prevState',prevState);
console.log(mutations);
console.log('currentState',state);
prevState=_.cloneDeep(state);
});
};
}
2、使用
exportdefaultnewVuex.Store({
modules:{
...
},
strict:true,
plugins:process.NODE_ENV==='production'?[]:[logger()]
});
三、 vuex数据持久化
1、函数的书写
functionvuexLocal(){
returnfunction(store){
constlocal=JSON.parse(localStorage.getItem('myvuex'))||store.state;
store.replaceState(local);
store.subscribe((mutations,state)=>{
constnewLocal=_.cloneDeep(state);
sessionStorage.setItem('myvuex',JSON.stringify(newLocal));
});
};
}
2、使用
exportdefaultnewVuex.Store({
modules:{
...
},
strict:true,
plugins:process.NODE_ENV==='production'?[vuexLocal()]:[logger(),vuexLocal()]
});
3、类似的第三方库
1. vuex-persistedstate
2. vuex-persist
总结
以上所述是小编给大家介绍的vuex中插件的编写案例解析，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。
热门推荐
10 六一婚礼文案祝福语简短
11 婚庆花篮祝福语简短大气
12 祝贺开业文案祝福语简短
13 美好的成语祝福语简短
14 娶嫂子的祝福语简短
15 20岁简短生日祝福语
16 端午发给客户祝福语简短
17 朋友花篮开业祝福语简短
18 婚礼结束聚餐祝福语简短