vuex 中插件的编写案例解析
程序员文章站
2022-05-14 15:19:09
一、
1、第一步
const myplugin = store => {
// 当 store 初始化后调用
store.subscribe((m...
一、
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 中插件的编写案例解析,希望对大家有所帮助
上一篇: Python最小二乘法矩阵