Vuex is a state manager that manages the state of all components of Vue.

role

When there are many components in the project and the structure is complex, we can extract their common states and put them in VUEX for unified management.

use

A basic VUex structure, store for stored common data, mutations for methods to modify data, and Actions for asynchronous operations

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

Vue.use(Vuex) 

// Store stores data and provides data access interfaces
export default new Vuex.Store({
  state: { // Store data
    num: 1
  },
  getters: { // Calculate the attributes of the data processing operations
    getMyNum: function(state){
      return state.num
    }
  },
  mutations: { // Change the dataadd(state, payload) { state.num += payload; }},actions: { // Asynchronous,{commit, dispatch} is a deconstruction
     add2({commit, dispatch}, payload) {
      setTimeout((a)= > {
        // Actions does not update itself, but calls the mutations method to update
        commit('add', payload);
      }, 1000)}}})Copy the code

Use this.$store to access data in vuex from a component

<p>{{this.$store.state.num}}</p>
<p>{{this.$store.getters.getMyNum}}</p>
Copy the code

Call vuex’s methods in the component

this.$store.commit("add".1); //(method name, parameter)
this.$store.dispatch("add2".2); // Asynchronous invocation
Copy the code

Implement vuEX yourself

// Customize vuex
let Vue;

// Data store
class Store { 
    constructor(options) { 
        this.vm = new Vue({ // Use vue to monitor data
            data: {
                state: options.state // Incoming data}})//getters
        let getters = options.getters; // Get the getters passed in
        this.getters = {}; // Define current getters
        // Iterate over the incoming getters
        Object.keys(getters).forEach(getterName= > { //getterName is the calculated property defined
            // Dynamically define attributes to this.getters current getters
            Object.defineProperty(this.getters, getterName, {
                get: (a)= > { // Define the properties of the traversal, and return the method passed in, and the parameters passed in
                    return getters[getterName](this.state)
                }
            })
        })

        // Modify the data
        let actions = options.actions;
        this.actions = {};
        Object.keys(actions).forEach(actionName= > {
            // Add a function to this.actions to execute the actions function passed in
            this.actions[actionName] = (payload) = > {
                actions[actionName](this, payload); }})let mutations = options.mutations;
        this.mutations = {};
        Object.keys(mutations).forEach(mutationName= > {
            this.mutations[mutationName] = (payload) = > {
                mutations[mutationName](this.state, payload);
            }
        })

    }

    get state() { // Add access methods
        return this.vm.state;
    }

    dispatch(type, payload) {
        this.actions[type](payload)
    }

    commit = (type, payload) = > { // Type is the name of the parameter passed in, payload is the parameter
        // Find the parameter name in mutations and execute it
        this.mutations[type](payload); }}Use this.code.store.mit () to add the $store object to all components so they can use this.code.store.mit ()
const install = (v) = > {
    Vue = v;
    Vue.mixin({ // add methods to all child components
        beforeCreate() { // Before component initialization
            console.log(this.$options.name) // Component name
            if(this.$options && this.$options.store) {
                // A store must be the root component
                this.$store = this.$options.store
            }else{
                // Assign the parent's store to the child component
                this.$store = this.$parent && this.$parent.$store; }}})}// Export the plug-in
export default {install, Store}
Copy the code