其他分享
首页 > 其他分享> > vuex数据持久化

vuex数据持久化

作者:互联网

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要是一个一维数组不然会解析错误



作者:无脚鸟30
链接:https://www.jianshu.com/p/e88ab068820b
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

标签:插件,持久,数据,存储,plugins,persistedstate,vuex,createPersistedState
来源: https://www.cnblogs.com/bamboopanders/p/13228503.html