vuex-persistedstate

安装

npm install vuex-persistedstate --save

使用

import createPersistedState from "vuex-persistedstate"
const store =newVuex.Store({
 state: {},
 mutations: {},
 actions: {},

  // 存储到 localStorege
 plugins: [createPersistedState()]

  // 存储到  sessionStorage
  plugins: [createPersistedState({
    storage:window.sessionStorage
  })]
})

需要持久化的数据

import createPersistedState from "vuex-persistedstate"

const store = newVuex.Store({
 state: {},
 mutations: {},
 actions: {},
 plugins: [createPersistedState({
 storage:window.sessionStorage,
     reducer(val)  {
         return {
             // 只储存state中的token
             assessmentData: val.token
         }
     }
 })]

}）

vuex-persist

• 它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage ，而是直接将状态保存至 cookie 或者 localStorage 中

安装

npm install --save vuex-persist
or
yarn add vuex-persist

使用

import VuexPersistence from 'vuex-persist'

const vuexLocal = new VuexPersistence({
    storage: window.localStorage
})

const store = new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  plugins: [vuexLocal.plugin]
}) 

• 通过以上设置，在图3中各个页面之间跳转，如果刷新某个视图，数据并不会丢失，依然存在，并且不需要在每个 mutations 中手动存取 storage

vuex-persist 的详细属性：