vuex可以进行全局的状态管理，但刷新后刷新后数据会消失。我们可以结合本地存储做到数据状态持久化，使用vuex-persistedstate插件，将vuex中需要持久化保存的数据保存到本地存储当中。

1. 安装

npm install --save vuex-persistedstate

2. 引入
   在vuex的index.js中引入

import createPersistedState from "vuex-persistedstate";

3. 使用
   将createPersistedState方法在 plugins的数组中调用，plugins是与state、getters、mutations、actions、model等并列的属性。

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

4. 使用举例
   在调用createPersistedState()时可以传入参数options进行配置

plugins: [createPersistedState({
    key: "xiaomi",
    paths: ["user"],
    // subscriber,插件的钩子函数,初始化的时候执行，
    // 在初始化的时候，调用user中的checkedLogin函数，检查有没有过期
    // 参数store是当前vuex的实例
    subscriber(store) {
      if(store.state.user.user.token){
       api.defaults.headers.common["Token"]=store.state.user.user.token;
      }
      return function (handler) {
        return store.subscribe(handler)
      }
    },
  }),
  ]

key ：字符串。用于存储持久状态的键。默认为vuex。
path ：数组。用于部分持久化状态的任何路径的数组。如果没有给出路径，则持久化保存所有的数据。如果给定一个空数组，则没有数据是持久保存的。路径必须使用点符号指定。如果使用模块，请包含模块名。如:“auth.user"。默认为未定义。
[“auth.user"]为将auth模块中的user数据持久保存。
[‘user’]为将user模块中的所有数据持久保存。

subscriber ：函数。用于设置突变订阅的函数。默认为

handler => store.subscribe(handler)

初始化的时候会执行。可以在这里面去调用检查数据有没有过期的方法，向服务器验证参数有无过期。

subscriber(handler) {
      handler.dispatch("user/checkedLogin")
      return store.subscribe(handler)
    }

配置项文档