目录

Vuex为什么要持久化?

 解决方案：以token举例

方案一：

方案二：把之前手动进行初始化变成自动 

如何测试效果

---

---

Vuex为什么要持久化?

原因：因为Vuex是基于内存，存在内存里面的，刷新网页之后就没有了，不会持久化储存

 解决方案：以token举例

方案一：

1. 获取到token后，一式两份；Vuex存一份，localStorage存一份；
2. 在Vuex中初始化token时，先从本地取，取不到再初始化；

方案二：把之前手动进行初始化变成自动 

实现思路：只要Vuex中的数据发生变化，就自动往本地同步一份

 步骤:

1. 安装vuex-persistedstate 插件

2. vuex中准备user模块和cart模块

3. 将插件配置到vuex的plugins选项中，配置user模块和cart模块进行状态持久化

4. 修改state数据就会触发自动同步机制，修改一下数据检测是否同步成功

实现:

1）安装一个vuex的插件 vuex-persistedstate 来支持vuex的状态持久化

// npm安装命令:

npm i vuex-persistedstate --save

// yarn安装

yarn add vuex-persistedstate

注意: 该插件应是生产依赖包, 所以要 -S

在package.json中

 代表安装成功

2）在src/store 文件夹下新建 modules 文件，在 modules 下新建 user.js 和 cart.js (这是举例,具体根据实际情况而定)

基于模块化管理

 这两个文件中的基础代码, 见官方文档 (Vue3.x-生态系统-Vuex-modules)

代码演示: 举例

export default {
  namespaced: true,
  state: () => ({
    id: '',
    nickname: '',
    avatar: '',
    token: '',
    mobile: ''
  }),
  mutations: {
    // 改数据函数
  },
  actions: {
    // 请求数据函数
  }
}

3）在 src/store/index.js 中导入 user 和 cart 模块

// createStore 创建store的实例
import { createStore } from 'vuex'
// 引入分模块
import user from './modules/user'
import cart from './modules/cart'

// 创建vuex仓库并导出
export default createStore({
  modules: {
    // 分模块
    user,
    cart
  }
})

4）使用vuex-persistedstate插件来进行持久化  具体配置可参考(vuex-persistedstate的GitHub)

 如何将某个模块进行持久化? 例如user和cart模块

src/store/index.js

// createStore 创建store的实例
import { createStore } from 'vuex'
import createPersistedstate from 'vuex-persistedstate'

import user from './modules/user'
import cart from './modules/cart'

// 创建vuex仓库并导出
export default createStore({
  modules: {
    // 分模块
    user,
    cart
  },
  // 将插件配置到Vuex的plugins中
  plugins: [
    createPersistedstate({
      key: 'erabbit-client-pc-store', // 存数据的key名   自定义的  要有语义化
      paths: ['user', 'cart'] // 要把那些模块加入缓存
    })
  ]
})

---

插件说明

1. 默认是存储在localStorage中，可以对存储的方法进行自定义

2. key是存储数据的键名

3. paths是存储state中的那些数据，如果是模块下具体的数据需要加上模块名称，如user.token

4. 修改state中的数据即可触发同步机制，可以看到本地存储数据的的变化

插件运行机制: 只要通过mutations函数对state中的数据进行修改操作, 就会触发自动同步功能(前提是在plugins中已经配好的模块)

---

如何测试效果

可在已经设置的模块定义一个mutation修改state中的数据, 在main.js去调用下，观察浏览器application的localStorage下是否已经有了数据

src/store/modules/user.js

 mutations: {
    // 改数据函数
    setUser (state, payload) {
      state.nickname = 'zhangsan'
    }
  },

src/main.js

// 测试触发mutations函数
setTimeout(() => {
  store.commit('user/setUser')
}, 2000)

成功效果