Vuex - 持久化

用过Vue中的Vuex的小伙伴都知道，Vuex存储数据在刷新之后会消失。如何解决这个问题呢？想过用localStorage本地存储又太row了，有没有更好解决办法呢？让在Vuex管理中的状态数据同时存储在本地，可免去自己存储的环节。
好在 vuex-persistedstate插件能够解决这个问题

它的原理是：

• 每次 mutation 都将整个 store 保存到本地（localStorage/sessionStorage/cookie）。
• 初始化时用本地数据替换（replaceState）掉 store。

使用场景：

• 在开发的过程中，像用户信息（名字，头像，token）需要Vuex中存储且需要本地存储。
• 购物车如果需要未登录状态下也支持，如果管理在Vuex中需要存储在本地。

1. 安装

npm i vuex-persistedstate

2. 在src/store 文件夹下新建modules文件，在modules下新建user.js和cart.js
src/store/modules/user.js

export default {
    namespaced: true, // 命名空间
    state() {
        return {
            //用户信息
            profile: {
                id: '',
                avatar: '',
                nickname: '',
                account: '',
                mobile: '',
                token: ''
            }
        }
    },
    mutations: {
        //修改用户信息
        setUser(state, val) {
            state.profile = val;
        }
    }
}

src/store/modules/cart.js

export default {
    state() {
        return {
            //购物车列表
            list: []
        }
    }
}

src/store/index.js

import { createStore } from 'vuex'
import cart from './modules/cart'
import user from './modules/user'

export default createStore({
  modules: {
    cart,
    user
  }，
  plugins: [
    createPersistedstate({
      key: 'erabbit-client-pc-store', // 本地存储名字
      paths: ['user', 'cart'] // 指定需要存储的模块
    })
  ]
  /**
   * 默认是存储在localStorage中
   * key是存储数据的键名
   * paths是存储state中的那些数据，如果是模块下具体的数据需要加上模块名称
   * 修改state后触发才可以看到本地存储数据的变化
   */
})

image.png

ok~