Vuex-持久化

在开发的过程中，像用户信息（名字，头像，token）需要vuex中存储且需要本地存储，持久化：1. 数据存到vuex（内存）2.
数据同时存到本地（硬盘localStorage）

这里我们用vuex的一个插件来持久化存储vuex

1. 安装vuex-persistedstate 插件
2. vuex中准备user模块（user模块中存的用户信息是所需要持久化存储的，根据自己需求而变化）=》store/modules/user.js
3. 将插件配置到vuex的plugins选项中，配置user模块进行状态持久化
4. 修改state数据就会触发自动同步机制，修改一下数据检测是否同步成功

步骤1：安装vuex-persistedstate 插件

npm i vuex-persistedstate

步骤2：准备需要持久化存储的模块

// 用户信息
export default {
  namespaced: true,
  state: () => ({
      profile: {
        id: '',
        name: '',
        token: ''
      }
  })
}

在store/index.js中引入

import { createStore } from 'vuex' // vue3

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

export default createStore({
  modules: {
    user,
    cart
  }
})

步骤3：配置user模块进行状态持久化(在index.js中操作)

引入：

import createPersistedstate from 'vuex-persistedstate'

使用：

export default createStore({
  plugins: [
    createPersistedstate({
      key: 'erabbit-client-pc-store', // key是存储数据的键名
      paths: ['user'] // paths是存储state中的那些数据，如果是模块下具体的数据需要加上模块名称，如user.profile.token=>只存储user模块下token数据到本地
    })
  ]
})

步骤4：测试

在user模块下的，mutations中定义一个方法，修改state中的值，在main.js中调用这个方法 ，查看本地数据是否改变

user.js

// 测试
mutations: {
    setUser (state) {
      state.profile.token = 'ceshih'
    }
}

main.js

store.commit('user/setUser')