What VueX does:

VueX is a state management tool used in Vue project development. Consider a project that frequently synchronizes values in data by passing parameters to components. Once the project is large, managing and maintaining these values can be a tricky task. For this purpose Vue provides a unified management tool, VueX, for these values that are frequently used by multiple components. In a Vue project with VueX, we only need to define these values in VueX, which can be used throughout the components of the Vue project. (VueX is a one-way data stream)

VueX website: vuex.vuejs.org/zh/

Use of VueX: Introduce store in main.js

– state: Sets the value



In a component reference in a computed property… The mapState structure is in use

Note: You can’t modify the value directly; you can only modify it by calling the function mutations

  import {mapState} from "vuex";
  computed: {
  // After being deconstructed, it is automatically added to the data, and can be accessed directly as data
  // User is in the user module, if not, do not need to write. mapState("user"["token"]),}Copy the code

Mutations: Used to write the method (sync function)

  mutations: {
      // GetToken is the function name
      // State represents the value used in VueX
      // The parameter passed by val
    gettoken(state, val) {
        // Change the value of the token
        state.token = val.token
    }
  }
Copy the code

References in components, methods… MapMutations deconstructs normal use

        import {mapMutations} from "vuex";
        methods: {
        // After deconstructing, it is automatically added to the computed property, and can be accessed directly as if it were a computed property
        // User is in the user module, if not, do not need to write. mapMutations("user"["gettoken"])
        
        // If an alias is assigned, it accepts objects, not arrays. mapState({aliasName: 'name'}}),Copy the code

– Actions: Used to write functions (asynchronous functions)

    actions: {
        // Add the setNum method. By default, the first argument is context, whose value is a copy of store
        // the parameter val represents
        gettoken(context,val) {
          console.log(content)
          context.state.token = '456'}}Copy the code

– getters: decorator

Write getters to the store file

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    token: "123"
  },
  mutations: {},actions: {},modules: {},getters: {
    getMessage(state) {
      return `hello${state.token}`}}})Copy the code

In a component reference in a computed property… The mapGetters structure works normally

    import {  mapGetters } from "vuex";
    computed: {
    // After being deconstructed, it is automatically added to the data, and can be accessed directly as data. mapGetters(["getMessage"])},Copy the code

– modules: merges modules

Vuex allows us to split stores into modules. Each module has its own state, mutation, action, and getter

const moduleA = {
  state: () = >({... }),mutations: {... },actions: {... },getters: {... }}const moduleB = {
  state: () = >({... }),mutations: {... },actions: {... }}const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

Copy the code

VueX persistence:

Link: Vuex persistence plugin – Solve the problem of data disappearing when refreshed (juejin. Cn)

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({ 
    // To sessionStorage
   plugins: [createPersistedState({ 
       storage: window.sessionStorage
   })]
})
Copy the code