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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。