Vue in-depth learning - vuex principles

1、Vuex What is it? ？

Applicable scenario : Component data transfer for complex relationships

Vuex It acts as a container for storing shared variables

• state A place to store shared variables
• getter, You can add one getter Derived state ,( amount to store Calculation properties in ）, To get the value of a shared variable
• mutations Used to store changes state Methods .
• actions It's also used to store changes state Methods , however action Is in mutations Based on . It is often used to do some asynchronous operations

2、Store The instantiation process

State Provides a unique public data source , All the shared data should be put into Store Of State For storage .

//  establish `store` data source , Provide unique public data 
const store = new Vuex.Store({
    // state  Point to an object ,  The data in the object is the data that needs to be shared globally 
    state: { count:0 }
})
 Copy code 

• Component access State Two ways of data in :

//  The first one is 
$store.state.count（ Global data name ）
 Copy code 

//  The second kind , from  vuex  On demand import  mapState  function 
import { mapState } from 'vuex'
//  Put the global data , Mapping to the calculated properties of the current component 
computed: {
    ...mapState(['count'])
}
 Copy code 

3、 What is a single data stream ？

Data triggers changes to the view , Views interact with users , Modify after triggering the action data data , The entire circular data flow is called a single data flow . amount to （ The process of passing a parent component into a child component ）

new Vue({
  // state  Data sources that drive applications ;
  data () {
    return {
      count: 0
    }
  },
  // view  To declare  state  Map to view ;
  template: `
    <div>{{ count }}</div>
  `,
  // actions  Response in  view  State changes caused by user input on .
  methods: {
    increment () {
      this.count++
    }
  }
})
 Copy code 

4、 What is? Mutation?

① change Vuex Of store The only way to get a state in ;

② Only through mutation change Store data , Do not operate directly Store Data in ;

//  Definition  Mutation
const store = new Vuex.Store({
    state: {
        count：0
    },
    mutations: {
        addN(state, step){
            //  Change status 
            state.count += step
        }
    }
})
 Copy code 

//  Trigger  mutation
methods: {
    handle(){ 
        //  Trigger  mutations  The first way 
        // this.$store.commit('add')    
        //  call  commit  function , Trigger  mutations  Parameters are carried when 
        this.$store.commit('addN', 3)
    }
}
 Copy code 

summary ： store It's a data warehouse , In order to manage the warehouse more conveniently , Take a big one store Break it up into small ones modules ;

Whole moudles It's a tree structure , Every module They define state,getters,mutations,actions;

Facilitate the module by recursion , Completed their initialization .

Vuex Provide these API It's all convenient, right store Do various operations to complete various abilities , In especial mapXXX The design of the .