VuexBasic knowledge of

01. Basic Concepts

What is PI (1)

  • VuexIs specially designed forVueA state management plug-in for a service that manages the data state of a page and provides an ecosystem of unified data operations
    • Equivalent to a databasemongoDB,MySQLAny component can access the data in the warehouse
  • VuexThe Model layer in the MVC pattern dictates that all data must passaction--->mutaion--->state This process changes the state

(2) Why

  • Multiple components passVuexCommunicate and reduce coupling
  • Easy to maintain and enhance readability

(3) How to do

  • NPM install vuex –save

  • New: SRC/store/index. Js

    import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
// Create a Vuex instance object
const store = new Vuex.Store({
    state: {},getters: {},mutations: {},actions:{}
})
export default store;
Copy the code

  • Import: Introduce Vuex in main.js

    import Vue from 'vue';
import App from './App.vue';
import store from './store';
const vm = new Vue({
    store: store,
    render: h= > h(App)
}).$mount('#app') 
Copy the code

02. Five core attributes

(1) state

  • Concept:

    • VuexIs used to store state
    • The state stored in state can only passmutationMake the change
    state: {
    state1: ' '.state2: ' '
}
Copy the code

  • Use:

    // Method 1: Access the Store instance to obtain the data
this.$store.state.state1

// Method 2: use the mapState helper function to mix state into compouted objects
import { mapState } from 'vuex'
computed: {
    ...mapState(['state1'.'state2'])}this.state1 // Use the same method as the data attribute or computed attribute
Copy the code

(2) the getters

  • Concept:

    • gettersYou can evaluate State, which is the evaluated property of Store
    • gettersCan be reused across multiple components
    getters: {
    // Accept state as the first argument
    getState1(state){
        return state.state1;
    },
    // You can take another getter as the second argument
    getState2(state, getters){
        return state.state2 + getters.getState1
    }
}
Copy the code

  • use

    / / way
this.$store.getters.getState

// Method 2: Use the mapGetters helper function to mix getters into compouted objects
import { mapGetters } from 'vuex'
computed: {... mapGetters(['getState'])
  	// Alternatively, specify an alias. mapGetters({myGetters: 'getState1' // Map to a custom name})}this.getState
// Alternatively, access through an alias
this.myGetters
Copy the code

(3) the mutations

  • Concept:

    • The only way to change the state in Vuex is to explicitly commit — mutation

    • Mutation must be a synchronization function

    • Mutation can have two parameters

      • The first parameter is state, which is the state of the store

      • The second parameter is payload, which is an additional parameter passed in when the mutation is submitted

        If the parameter to be passed contains multiple fields, the payload should be an object

    mutations: {
	CHANGE_STATE1(state, newVal) {
		state.state1 = newVal
	},
	CHANGE_STATE2(state, payload){
		state.state2 += payload.num
	}
}
Copy the code

  • Use:

    // Method 1:
this.$store.commit('CHANGE_STATE1', newVal)
this.$store.commit('CHANGE_STATE2', { count: 10 })

// Mutation is incorporated into methods using the mapMutations auxiliary function
import { mapMutations } from 'vuex'
methods: {
  ...mapMutations(['CHANGE_STATE1'])
  // Alternatively, specify an alias. mapMutations({myMutations: 'CHANGE_STATE2' // Map to a custom name})}this.CHANGE_STATE1(newVal)
/ / or
this.myMutations({ num: 10 })
Copy the code

(4) the actions

  • Concept:

    • Handling asynchronous requests needs to be placed in actions

    • The Action commits mutation rather than a direct state change

      • Change statestateOnly throughmutations

    • The Action function takes a context object with the same methods and properties as the Store instance

      • From this context object, you can call the properties and methods of the current store
    actions: {
    asyncChange1(context, newVal) {
        // Simulate asynchrony
        setTimeout(() = > {
            context.commit('CHANGE_STATE1', newVal);
        }, 1500)},// It is also possible to destruct properties and methods within an object
    asyncChange2({ commit }, payload) {
        commit("CHANGE_STATE2", payload); }}Copy the code

  • Use:

    // Method 1:
this.$store.dispatch('asyncChange1', newVal)

// Method 2: use the mapActions helper function to add actions to the methods
import { mapActions } from 'vuex'
methods: {
    ...mapActions(['asyncChange1'])
    // Specify an alias. mapActions({myActions: 'asyncChange2'})}this.asyncChange1(newVal)
// Using an alias
this.myActions({ count: 10 })
Copy the code

(5) modules

  • concept

    • With a single state tree, all the states of an application are grouped into one large object
    • When the application becomes very complex, the Store object can become quite bloated
    • So we split the store into modules
      • Each module has its ownState, mutations, Actions, getters, or even nested submodules, split from top to bottom in the same way
    / / define moduleA
const moduleA = {
    state: {},
    mutations: {},
    getters: {},
    actions: {}}Copy the code

  • use

    import moduleA from './module/moduleA';
const store = new Vuex.Store({
    modules: {
        moduleA // All properties in moduleA will be registered globally
    },
    state: {},
    mutations: {},
    getters: {},
    actions: {}})Copy the code

    I front-end side dish chicken, if there is wrong, please forgive