Detailed explanation of several examples of vuex storage data

1. What is Vuex

Vuex is designed specifically for Vuejs applicationsStatus Management Tools. It uses centralized storage to manage the state of all components of the application and ensures that the state changes in a predictable way with corresponding rules.

1. The composition of Vuex

1）state

The state is a single state stored and is the basic data stored.

2）Getters

getters is the calculation property of the store, and the processing of state is derived data. Just like computed compute properties, the value returned by getter is cached according to its dependencies and will be recalculated only when its dependencies change.

3）Mutations

Mutations submits the change data, and use the method to change the state of the state storage. (mutations synchronization function)

4）Actions

actions are like a decorator, submitting mutations instead of changing the state directly. (actions can contain any asynchronous operations)

5）Module

Module is a store-divided module, each module has its own state, getters, mutations, and actions.

2. Use of Vuex

import Vue from "vue"
import Vuex from "vuex"
(Vuex)
const state = {
 id:null,
 code:null,
 
}
const mutations = {
  //Save data  CHANGE_ACTIVE_LI(state, { id, code }) {
     = id
     = code
  },
   //Clear data   SET_CLEAR_DATA(state,data){
    =data
  }
}
const actions = {
  //Save data  changeSetting({ commit }, data) {
    commit('CHANGE_ACTIVE_LI', { id: , code:  })
  },
  //Clear data  clearVuex({ commit }) {
    commit("SET_CLEAR_DATA", null);
  },
 
}
export default {
  //Solve module name conflict  namespaced: true,
  state,
  mutations,
  actions
 

 next() {
 //The product/changeSetting here is a method in vuex. I hereby specify the following object to the changeSetting method in product      this.$("product/changeSetting", {
        id: ,
        code: ,
      });
    },

//Take out the value of id in vuex   = this.$;

2. Local storage

The data stored in vuex will be removed after the page is refreshed, but the data stored locally will not. Local storage is divided into two types: localStorage and sessionStorage

the difference:

• localStorage: Data can be stored for a long time, and the data will always exist unless the user knows the localStorage information. Data can be shared between different pages in the same browser.
• sessionStorage: Short-term storage of data. The data will be cleared after the user closes the tab or directly closes the browser. Data cannot be shared between different pages of the same browser.

1.Storing data

Local storage can be used directly without introducing it. The code is as follows:

// Store the data into insuranceCode and need to be converted into string type in advance("insuranceCode", ());
("insuranceCode", ());

2. Extract the data

Now I want to put the data into vuex and save it, which is equivalent to putting the apple into the fruit disk. We need to use it in the method on the page like this, the code is as follows:

 (("insuranceCode"));
(("insuranceCode"));

3. Clear data

The specified data can be clearly defined, and all data can be clearly defined. The code is as follows:

// Clear insuranceCode("insuranceCode");
("insuranceCode");
// Clear all();
();

Summarize

This is the end of this article about several methods of storing data by vuex. For more related content on storing data by vuex, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!