[Solve Vuex refresh data loss problem]

foreword

Vuex is a state management pattern + library developed specifically for Vue.js applications. It uses a centralized storage to manage the state of all components of the application, and uses corresponding rules to ensure that the state changes in a predictable manner.
相信在vue开发项目中，vuex已成常用插件之一，目前vuex已经出到vuex4，vuex在实际开发过程中也经常被使用，然而开发过程中会遇到vuex的一个问题，关于页面刷新数据丢失

Solve the problem that Vuex data refresh is not lost

Recommended plug-in: vuex-persistedstate
official website address

install dependencies

npm install --save vuex-persistedstate

usage

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

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

Vuex module example

/* 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]
})