vuex持久化存储

在开发过程中你会发现一旦你刷新了页面vuex就会被重置,刷新浏览器的话会导致js重新加载,Vuex的Store全部重置, 所以为了防止这类情况的发生的话,一般来说我们会用localStorage对vuex进行一个存储,防止Vuex丢失的情况。但是如此这样做的话在每次状态变更时都要手动的去存储下,这样就比较麻烦了,查看vuex文档官方给我们提供一个插件选项,这时我们就会想通过插件了做这些动作了,看下vuex插件如何写的。

const myPlugin = store => {
  // 当 store 初始化后调用
  store.subscribe((mutation, state) => {
    // 每次 mutation 之后调用
    // mutation 的格式为 { type, payload }
  })
}

然后像这样使用:

const store = new Vuex.Store({
  // ...
  plugins: [myPlugin]
})

由此我们可以这样做:

const myPlugin = store => {
  // 当 store 初始化后调用
  store.subscribe((mutation, state) => {
    // 每次 mutation 之后调用
    // mutation 的格式为 { type, payload }
     localStorage.setItem("store",  JSON.stringify(state))  //因为vuex都是通过mutation来修改数据的,所以在每次修改的时候都把state存到本地内存中
  })
}

这只是一种比较简单的处理vuex存储的数据会丢失问题。如果有时间可以自己写插件将其完善,在此推荐使用vuex-persistedstate插件该插件已经比较完美的做了上述事情

安装

npm install vuex-persistedstate  --save

使用

import createPersistedState from 'vuex-persistedstate'
 
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()]
})

createPersistedState([options])参数使用说明

  • key 存储持久状态的键。(默认:vuex)
import createPersistedState from 'vuex-persistedstate'
 
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
    key: 'stort'                                //localStorage名为stort
  })]
})
  • paths 用于部分保持状态的任何路径的数组。如果没有给定路径,则将保持完整状态 (默认:[])
const state = {
    userInfo: null,
    token    :null
};
import createPersistedState from 'vuex-persistedstate'
 
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
    paths  : [
              'userinfo'                                        //localStorage只保存userinfo信息
          ]
  })]
})
  • reducer 一个函数,将被调用来减少基于给定的路径持久化的状态。默认包含这些值
import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
     reducer(state,paths) {
            return {
                // 只储存state中的user
                user: state.userInfo      //只存储userInfo信息并且在localStorage中userInfo命名替换成user
            }
        }
     }
  })]
  • subscriber :一个被调用来设置突变订阅的函数。默认为store => handler => store.subscribe(handler)
  • storage :而不是(或与)getState和setState。默认为localStorage。
    import createPersistedState from "vuex-persistedstate"
    const store = new Vuex.Store({
      // ...
      plugins: [createPersistedState({
          storage: window.sessionStorage      //选择sessionStorage 进行存储
         }
      })]
    
    • getState :将被调用以重新水化先前持久状态的函数。默认使用storage。
    • setState :将被调用来保持给定状态的函数。默认使用storage。
    • filter :将被调用来过滤将setState最终触发存储的任何突变的函数。默认为() => true
    • arrayMerger:用于在重新水化状态时合并数组的函数。默认为功能(存储,保存)返回保存(保存状态替换提供状态)。

    自定义存储

    如果在本地存储中有Vuex存储的状态是不理想的话。您可以轻松实现使用cookie的功能(或者您可以想到的任何其他功能)

    import { Store } from 'vuex'
    import createPersistedState from 'vuex-persistedstate'
    import * as Cookies from 'js-cookie'
     
    const store = new Store({
      // ...
      plugins: [
        createPersistedState({
          storage: {
            getItem: key => Cookies.get(key),
            // Please see https://github.com/js-cookie/js-cookie#json, on how to handle JSON.
            setItem: (key, value) => Cookies.set(key, value, { expires: 3, secure: true }),
            removeItem: key => Cookies.remove(key)
          }
        })
      ]
    })
    

    你可能感兴趣的:(vuex持久化存储)