【解决Vuex刷新数据丢失问题】

前言

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
相信在vue开发项目中，vuex已成常用插件之一，目前vuex已经出到vuex4，vuex在实际开发过程中也经常被使用，然而开发过程中会遇到vuex的一个问题，关于页面刷新数据丢失

解决Vuex数据刷新不丢失

推荐插件：vuex-persistedstate
官网地址

安装依赖

npm install --save vuex-persistedstate

用法

import { createStore } from "vuex";
import createPersistedState from "vuex-persistedstate";

const store = createStore({
  // ...
  plugins: [createPersistedState()],
});

Vuex模块示例

/* module.js */
export const dataStore = {
  state: {
    data: []
  }
}

/* store.js */
import { dataStore } from './module'

const dataState = createPersistedState({
  paths: ['data']
})

export new Vuex.Store({
  modules: {
    dataStore
  },
  plugins: [dataState]
})