vuex中的插件plugins.js的浅使用

最近在做登录得时候用到了vuex中的plugins.js插件。发现挺好用，可以推荐大家使用以下

使用方法得话，我用的比较简单首先在store文件中创建一个plugins.js文件夹。

内容如下

const plugin = store => {
    let arr = Object.keys(store.state);
    let obj = {};

    arr.forEach(item => {
        if (window.localStorage[item]) {
            obj[item] = JSON.parse(window.localStorage[item]);
            store.replaceState(obj);
        }
    });

    // 当 store 初始化后调用
    store.subscribe((mutation, state) => {
        // 每次 mutation 之后调用
        // mutation 的格式为 { type, payload }
        // console.log(arr);
        if (state.agreed == false) {
            localStorage.removeItem("login");
            window.sessionStorage.setItem("login", JSON.stringify(state.login));
            // arr.forEach(item => {
            //     window.localStorage.clear();
            //     window.sessionStorage[item] = JSON.stringify(state[item]);
            // });
        } else if (state.agreed == true) {
            sessionStorage.removeItem("login");
            window.localStorage.setItem("login", JSON.stringify(state.login));
            // arr.forEach(item => {
            //     window.sessionStorage.clear();
            //     window.localStorage[item] = JSON.stringify(state[item]);
            // });
        }
    });
};

export default plugin;

　　具体得话按照自己得方式来

写好之后再在store文件中的index.js中引用即可

    plugins: [plugin]。

自我总结，它是一个长期存储得解决方法，因为放在state中的数据在刷新时会丢失，这时候使用这个plugin.js插件它会帮你存储起来。

 

以前存储token都是直接用得localstorage，这次用了新的方式总结一下。