Vuex数据状态持久化

作者: 无脚鸟30 | 来源:发表于2018-10-30 17:39 被阅读163次

    vuex可以进行全局的状态管理,但刷新后刷新后数据会消失,这是我们不愿意看到的。怎么解决呢,我们可以结合本地存储做到数据状态持久化,也可以通过插件vuex-persistedstate。


    1.手动利用HTML5的本地存储

    方法

    1、vuex的state在localStorage或sessionStorage中取值;

    2、在mutations中,定义的方法里对vuex的状态操作的同时对存储也做对应的操作。

    这样state就会和存储一起存在并且与vuex同步


    2.利用vuex-persistedstate插件

    插件的原理其实也是结合了存储方式,只是统一的配置就不需要手动每次都写存储方法。

    使用方法

    安装

    npm install vuex-persistedstate --save

    引入及配置:在store下的index.js中

    import createPersistedState from "vuex-persistedstate"

    conststore =newVuex.Store({

      // ...

      plugins: [createPersistedState()]

    })

    默认存储到localStorage


    想要存储到sessionStorage,配置如下

    import createPersistedState from "vuex-persistedstate"

    conststore = newVuex.Store({

        // ...

        plugins: [createPersistedState({

            storage:window.sessionStorage

        })]

    })

    默认持久化所有state


    指定需要持久化的state,配置如下

    import createPersistedState from "vuex-persistedstate"

    conststore = newVuex.Store({

      // ...

      plugins: [createPersistedState({

      storage:window.sessionStorage,

          reducer(val)  {

              return {

                  // 只储存state中的assessmentData

                  assessmentData: val.assessmentData

              }

          }

      })]

    })



    vuex引用多个插件的写法

    譬如:vuex提示的插件和持久化的插件一起使用,配置如下

    import createPersistedState from "vuex-persistedstate"

    import createLogger from 'vuex/dist/logger'

    // 判断环境 vuex提示生产环境中不使用

    constdebug = process.env.NODE_ENV !== 'production'

    constcreatePersisted = createPersistedState({

        storage:window.sessionStorage

    })

    exportdefaultnewVuex.Store({

      // ...

      plugins: debug ? [createLogger(), createPersisted] : [createPersisted]

    })

    plugins要是一个一维数组不然会解析错误


    相关文章

      网友评论

        本文标题:Vuex数据状态持久化

        本文链接:https://www.haomeiwen.com/subject/qaagtqtx.html