vuex可以进行全局的状态管理，但刷新后刷新后数据会消失，这是我们不愿意看到的。怎么解决呢，我们可以结合本地存储做到数据状态持久化，但是太麻烦每次都要操作，强烈建议使用插件利用vuex-persistedstate插件.今天推荐两种vuex-persistedstate和vuex-persist

第一种 vuex-persistedstate插件

安装

npm install vuex-persistedstate --save

1.使用vuex-persistedstate默认存储到localStorage

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

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

2.使用vuex-persistedstate存储到sessionStorage

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

import createPersistedState from "vuex-persistedstate"
const store = newVuex.Store({
   state: {},
   mutations: {},
   actions: {},
   plugins: [createPersistedState({
 
       storage:window.sessionStorage
   })]
})

3.使用vuex-persistedstate指定需要持久化的state

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

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
})

引入进vuex插件：

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

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

vuex-persist 的详细属性：

属性 类型 描述