Vue3-Vuex的缺点和解决方法

引言

在使用 Vue 开发项目的时候，我们经常会利用 Vuex 来进行全局的状态管理从而达到实现数据全局共享的目的

但是使用 Vuex 有一个缺点就是在页面刷新之后数据会消失从而使页面展示异常或者请求接口报错

因为用户刷新页面是不可控的因素，这个时候我们就要结合本地存储来保证数据的存储。

安装依赖

在Vue UI 中，需要给自己的项目安装一个依赖

vuex-persistedstate

在 store/index.js 中，对 vuex-persistedstate 插件进行配置

默认存储所有的 state

import {
  createStore
} from 'vuex'

// Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
import createPersistedState from "vuex-persistedstate"

import {
  ModuleUser
} from './user/index'

export default createStore({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {
    user: ModuleUser,
  },

  // Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
  // 下面的写法，会默认持久化所有state

  plugins: [createPersistedState({
    // 存储在 localStorage 的数据可以长期保留
    // 当页面被关闭时，存储在 sessionStorage 的数据会被清除
    storage: window.sessionStorage
  })]
})

如果只想存储指定的 state，plugins 需要改用下面的写法

plugins: [createPersistedState({
    // 存储在 localStorage 的数据可以长期保留
    // 当页面被关闭时，存储在 sessionStorage 的数据会被清除
    storage: window.sessionStorage,
    reducer(val) {
      return {
        user: val.user,
      }
    }
  })]

结果展示