vuex数据状态持久化之(登录-持久化存储vuex)

原因：

**浏览器一刷新页面，项目中的代码就会重新执行：vuex以变量方式保存在内存中，就是说一刷新里面所有的值都会回到初始化**

解决：

这里介绍一个vuex的插件包叫做`vuex-persistedstate@3.2.1`版本(配合vue2使用, 默认最新版是配合vue3使用)

1.安装

 yarn add vuex-persistedstate@3.2.1
    
 npm  i  vuex-persistedstate@3.2.1

2.引入vuex并配置

   import Vue from 'vue'
   import Vuex from 'vuex'
    **// 引入该插件
   import createPersistedState from 'vuex-persistedstate'
   
   Vue.use(Vuex)
   
   export default new Vuex.Store({
     state: {
       // 1. 用来存储登录成功之后，得到的 token
       token: ''
     },
     mutations: {
       // 2. 更新 token 的 mutation 函数
       updateToken (state, newToken) {
         state.token = newToken
       }
     },
     **// 配置为 vuex 的插件
     plugins: [createPersistedState()]
   })

3. 这次再来重新登录, 查看浏览器调试工具vuex和浏览器本地存储位置, 是否自动同步进入

4. 刷新网页看调试工具里vuex的默认值确实从本地取出了默认值, 保证了vuex的持久化