解决页面刷新vuex失效（vuex-persistedstate）

参考链接：
https://npmmirror.com/package/vuex-persistedstate
https://blog.csdn.net/qq_54527592/article/details/122378328

解决问题：页面刷新vuex状态丢失

• 可以手动兼容：存 vuex 的时候手动存入 storage 一份，（刷新时）在 app.vue 中取 storage 中的数据塞进 vuex 中
• 也可以使用插件，插件会将 vuex 中的数据复制一份进 storage，刷新时也会自动同步到 vuex（插件：vuex-persistedstate ）

一、插件安装

npm i vuex-persistedstate

二、插件使用

1、store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

// 模块
import user from './modules/user'
import device from './modules/device'

Vue.use(Vuex)

export default new Vuex.Store({
  // 全局的state、mutations、actions、getters
  state: {},
  mutations: {},
  actions: {},
  getters: {},
  // 为兼容已有代码，内部未使用命名空间，使用时不需按照模块
  modules: {
    user,
    device
  },
  plugins: [
    // vuex持久化配置，默认存储在localstorage中
    createPersistedState({
      // 存储数据的键名，默认是vuex
      key: 'vuex',
      // 存储数据中的哪些数据（如果是模块下具体的数据需要加上模块名称，如 user.token）
      paths: ['user', 'device']
    })
  ]
})

2、 store/modules/user.js

export default {
  state () {
    return {
      token: '',
      userInfo: {},
    }
  },
  getters: {
    token(state) {
      return state.token || ''
    },
    userInfo(state) {
      return state.userInfo || {}
    },
  },
  mutations: {
    setToken(state, payload) {
      state.token = payload
    },
    setUserInfo(state, payload) {
      state.userInfo = payload
    },
  },
  actions: {
    setToken({ commit }, payload) {
      commit('setToken', payload)
    },
    setUserInfo({ commit }, payload) {
      commit('setUserInfo', payload)
    }
  }
}

然后正常使用vuex即可