一、使用插件解决vuex数据刷新丢失

使用vuex的插件

在使用vuex-persistedstate 插件

这个插件其实也是使用本地缓存来储存store中的属性

• 安装vuex-persistedstate插件

  npm install vuex-persistedstate --save
  

• 在store中的index.js中引入

  import persistedState from 'vuex-persistedstate'
  let create_persistedstate = persistedState({ 
      key:'store',
      storege:window.loaclStorege
  })
  export default new Vuex.Store({
      // ...
      plugins: [create_persistedstate]
  })
  

  persistedState函数中的是一个对象

  对象中的属性：

  • key <String>：用于存储持久状态的密钥。默认为vuex。
  • paths <Array>：任何路径的数组，以部分保留状态。如果未给出路径，则完整状态将保留。如果给定一个空数组，则不会保留任何状态。必须使用点表示法指定路径。如果使用模块，请包括模块名称。例如：“ auth.user”默认为undefined。
  • reducer <Function>：将根据给定路径调用以减少状态持久化的函数。默认值包括这些值。
  • subscriber <Function>：一个用于设置突变订阅的函数。默认为store => handler => store.subscribe(handler)。
  • storage <Object>：代替（或结合）getState和setState。默认为localStorage。
  • getState <Function>：将被调用以恢复先前持久状态的功能。默认使用storage。
  • setState <Function>：将被调用以保持给定状态的函数。默认使用storage。
  • filter <Function>：一个将被调用以过滤setState最终将在存储中触发的任何突变的函数。默认为() => true。
  • overwrite <Boolean>：补液时，是否getState直接用输出结果覆盖现有状态，而不是用合并两个对象deepmerge。默认为false。
  • arrayMerger <Function>：补充状态时合并数组的功能。默认为function (store, saved) { return saved }（保存状态替换提供状态）。
  • rehydrated <Function>：补液完成后将被调用的函数。当您使用Nuxt.js时，该功能非常有用，持久化状态的恢复是异步发生的。默认为store => {}
  • fetchBeforeUse <Boolean>：一个布尔值，指示在使用插件之前是否应从存储中获取状态。默认为false。
  • assertStorage <Function>：确保插件可用的可重写功能，会在插件初始化时触发。默认情况下，是在给定的Storage实例上执行Write-Delete操作。请注意，默认行为可能会引发错误（如DOMException: QuotaExceededError）。