Two implementation solutions for vuex data persistence

Business requirements:

When developing SPA projects based on Vue, in order to solve the problem of data loss after page refresh, we generally store data in localstorage or sessionstorage; when data needs to be globally processed and managed uniformly, we will also use vuex officially provided by Vue to manage data uniformly. Compared with localstorage or sessionstorage, vuex is safer in storing data. At the same time, vuex also has some disadvantages. When the page is refreshed, the data stored in the state of vuex will also be updated. The data stored in vuex cannot be persisted, and monitoring processing is required to maintain the persistence of the data state stored in vuex.

In order to solve the problem that the data status stored in vuex cannot be persisted after the page is refreshed, the solution I adopted is to use a third-party plug-in tool to realize the persistent storage of vuex data to solve the problem of data update after the page is refreshed.

Solution 1: vuex-persistedstate

Install the plugin

yarn add vuex-persistedstate
// or npm install --save vuex-persistedstate

How to use

import Vuex from "vuex";
// Import the plugin import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex);

const state = {};
const mutations = {};
const actions = {};

const store = new Vuex.Store({
	state,
	mutations,
	actions,
  /* vuex data persistence configuration */
	plugins: [
		createPersistedState({
      // Storage methods: localStorage, sessionStorage, cookies
			storage: window.sessionStorage,
      // The key value of the stored key key: "store",
			render(state) {
        //Data to be stored: This project uses the es6 extension operator to store all the data in state return { ...state };
			}
		})
	]
});

export default store;

Persistent storage of module data in 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]
});

Note:

1. storage is the storage method, and the optional values ​​are localStorage, sessionStorage and cookies;
2. The localStorage and sessionStorage storage methods can be written in the above code. If you want to use cookies to store data, you need another way to write it;
3. Render receives a function and returns an object. The key-value pairs in the returned object are the data to be stored persistently.
4. If you want to persist some data, please use key:value pairs to store data in the returned object. The parameter in the render function is the state object.

Solution 2: vuex-persist

Install the plugin

yarn add vuex-persist
// or npm install --save vuex-persist

How to use

import Vuex from "vuex";
// Import the plugin import VuexPersistence from "vuex-persist";

Vue.use(Vuex);
// Initialize const state = {
	userName:'admin'
};
const mutations = {};
const actions = {};
// Create an instance const vuexPersisted = new VuexPersistence({
	storage: window.sessionStorage,
  render:state=>({
  	userName:state.userName
    // or...state
  })
});

const store = new Vuex.Store({
	state,
  actions,
  mutations,
  //Data persistence settings plugins: [vuexPersisted.plugins]
});

export default store;

Property Methods

Summarize

The above two solutions can realize the persistent storage of vuex data. Solution 1 is what I used in the actual development process, and Solution 2 is what I saw on Github. In general, both can meet the final needs of the time, and there are corresponding case demos for reference. In comparison, the number of starts for Solution 1 on GitHub is higher than that for Solution 2.

Please choose the solution that suits you based on the actual situation!

This concludes this article on two implementation solutions for vuex data persistence. For more relevant vuex data persistence content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!