当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vuex 中插件的编写案例解析

vuex 中插件的编写案例解析

2019年07月18日  | 移动技术网IT编程  | 我要评论

垂头丧气,坦克是哪国发明的,脱罩门

一、

1、第一步

const myplugin = store => {
 // 当 store 初始化后调用
 store.subscribe((mutation, state) => {
 // 每次 mutation 之后调用
 // mutation 的格式为 { type, payload }
 });
};

2、第二步

const store = new vuex.store({
 // ...
 plugins: [myplugin]
});

二、编写一个打印日志的插件

1、函数的书写

import _ from 'lodash';
function logger() {
 return function(store) {
 let prevstate = store.state;
 store.subscribe((mutations, state) => {
  console.log('prevstate', prevstate);
  console.log(mutations);
  console.log('currentstate', state);
  prevstate = _.clonedeep(state);
 });
 };
}

2、使用

export default new vuex.store({
 modules: {
 ...
 },
 strict: true,
 plugins: process.node_env === 'production' ? [] : [logger()]
});

三、 vuex 数据持久化

1、函数的书写

function vuexlocal() {
 return function(store) {
 const local = json.parse(localstorage.getitem('myvuex')) || store.state;
 store.replacestate(local);
 store.subscribe((mutations, state) => {
  const newlocal = _.clonedeep(state);
  sessionstorage.setitem('myvuex', json.stringify(newlocal));
 });
 };
}

2、使用

export default new vuex.store({
 modules: {
 ...
 },
 strict: true,
 plugins: process.node_env === 'production' ? [vuexlocal()] : [logger(), vuexlocal()]
});

3、类似的第三方库

1

2

总结

以上所述是小编给大家介绍的vuex 中插件的编写案例解析，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网