下载： vuex-persistedstate

npm install --save vuex-persistedstate

或者：

npm install --save vuex-persistedstate --legacy-peer-deps

引入使用：在store文件夹下的index文件中，也就是放vuex的js代码中引入：

import createPersistedState from 'vuex-persistedstate'


export default new Vuex.Store({
  //...
  plugins: [createPersistedState()]
}

使用的情景：

使用vuex持久化的情景是：看上面这个图，刚开始的数据是上海的电影院数据，后面当我们切换了地区，切换成“安阳”，数据变成了安阳区的电影院，但是让我们刷新一下页面，数据又变成了上海的，但是我们想要的效果是，当刷新页面，数据还是安阳的，所以就用到了vuex的持久化。

vuex持久化的原理是：

• 每次往vuex中缓存新请求来的数据时候，这个小插件都会往Local Storage中存一份；

当我们把vuex持久化需要的东西引入，再来切换一下地区，刷新一下页面，定位数据就会停留在当前的定位了：

原理的体现：

• 当我们运用上vuex持久化，再切换到“鞍山”，就会有一份数据也存到Local Storage中存一份了：

• 图中它是把  cinemaList 、cityId、cityName、isTabbarShow数据都给存在来了；
• 我们也可以控制它只存哪些数据，哪些数据不存；
• 方式是：在reducer里规定

plugins: [createPersistedState({
    reducer: (state) => {
      return {
        cityId: state.cityId,
        cityName: state.cityName
      }
    }
  })]

• 给 createPersistedState 传一个对象；
• 键是reducer，值是一个回调函数，参数是state；
• 回调函数要有返回值return，返回的是要存储的状态；

结果：

持久化的效果：