zoukankan      html  css  js  c++  java
  • 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,这次用了新的方式总结一下。
     
  • 相关阅读:
    IndexOf、IndexOfAny 、Remove
    静态类、静态方法的使用
    面向对象 字段、方法、属性
    break、continue、return
    冒泡排序
    方法练习
    Oracle-查看oracle是否有表被锁
    教程-键盘扫描码
    网卡远程唤醒-远程开机再配合远程控制
    远程控制篇:在DELPHI程序中拨号上网
  • 原文地址:https://www.cnblogs.com/baisong11/p/13719220.html
Copyright © 2011-2022 走看看