What is vuex

Vuex is a state management mode developed specifically for vue.js applications. You can manage the data state of complex applications, such as the communication of sibling components, the passing of values from multiple nested components, and so on.

Generally speaking, VUEX is global data management, which is used to manage global data. The original data management of VUE can only transfer data between parent and child components, and it is not convenient. Using VUEX can carry out global data management, store all data in VUEX, and call it when using

The core of Vuex:

  • state
  • mutations
  • actions
  • getter

The use of the Vuex

Install and use vuex

The installation

1. Perform installation in the project

npm install vuex --save
Copy the code

2. Create a store.js file

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
      // Store initial data
    count: 0
  },
  mutations: {
      // The method to store the modified data
    increment (state) {
      state.count++
    }
  }
})
Copy the code

Using the data

Method 1: call with $store

Call data directly in the component using this.$store.state

This $store. State. DataCopy the code

Method 2: Import mapState, expand the mapping of the data in the component, and write it to the calculation property. When using it, write count directly

// enter mapState first
import {mapState} from 'vuex'

computed:[
    ...mapState(['count']]Copy the code

When operating on data, the data of state cannot be directly called. If the data is to be modified, methods need to be written in mutation, so as to facilitate the search for the problem

The effect and use of Mutations

Mutations is all about manipulating the data

  mutations: {
// The method to store the modified data
   add(state) {
     state.count++
   }
 }
Copy the code

Use mode 1:

Trigger the mutations function, using commit to call the method name inside

This. codestore.mit This is the first way to trigger mutation

methods:{
   handle(){
       this.$store.commit('add')}}Copy the code

Mutations mutations can transfer two parameters, the first is state, and the second is a user-defined parameter payload

  mutations: {
// The method to store the modified data
   addN(The state, N) {
     state.count+=N
   }
 }
Copy the code

Calls are made in the component’s methods

methods:{
   handle2(){
       // trigger mutation and pass the parameter
       this.$store.commit('addN'.4)}}Copy the code

Usage Method 2

Import the mapMutations function in VUex into the component

MapMutations ([‘sub’]) maps the methods on the inside to those on the store

. Is the expansion operator

import {mapMutations} from 'vuex'

methods: {// add method name to [] ['addN','sub']. mapMutations(['sub'])
   btnhandle(){
       // Just write the this. method name
       this.sub()
       // When a parameter is passed, write the parameter directly, without writing state
       this.addN(4)}}Copy the code

Note: asynchronous code cannot be written in Mutation functions; Write timing functions, for example, where the page changes but the actual state value does not. So we have actions

The use of the Actions

Action is used to process asynchronous tasks.

If the data is changed by an asynchronous operation, it must be changed through an Action rather than Mutation, but the data must be changed indirectly by triggering Mutation in the Action.

Write an actions equivalent to mutations in the store :{} calls the mutations method in it, and triggers actions in the component

  mutations: {
  // The method to store the modified data
    add(state) {
      state.count++
    }
  },
  actions: {// Context is a context
      addAsync(context){
          setTimeout(() = >{
              // Call the add method. You cannot directly modify state data in actions, only mutation has this power
              context.commit('add')}}}Copy the code

Using Actions triggers using Dispatches in the component

btnHandle(){
    //dispatch triggers actions exclusively
    this.$store.dispatch('addAsync')}Copy the code

Actions pass parameters

You have to write parameters in actions for store and mutations

  mutations: {
  / / the refs
    addN(state,n) {
      state.count+=n
    }
  },
  actions: {// Context is a context
      addAsync(context,n){
          setTimeout(() = >{
              // Call the add method and pass the parameter
              context.commit('addN',n)
          })
      }
  }
Copy the code

Take a realistic parameter in a component

btnHandle(){
    // Dispatch specifically triggers the action and passes in parameters
    this.$store.dispatch('addAsync'.5)}Copy the code

The second is to expand and map into mapActions


// Introduce methods
import {mapActions} from Vuex methods:{// Map actions... mapActions(['addAsync']) btnHandle (){// call the corresponding actions this.addAsync()}} // You can also write the mapped method name on the click without writing the btnHandle methodCopy the code

Note: Call the Actions method in the component, and use commit in the Actions to call the Mutations method

getters

  • Getters are used to process data in a Store to form new data. The original data will not be modified
  • Getters can process existing data in the Store to form new data, similar to the calculation properties of Vue.
  • As the data in the Store changes, so does the data in the Getter.
state:{
   count:0
},
getters: {showNum(state){
       return 'The latest available data is :'+state.count
   }
}
Copy the code

First call: this.$store.getters. Method name

this.$store.getters.showNum
Copy the code

The second invocation: map expansion, mapped in computed

import {mapGetters} from 'vuex'

computed: {... mapGetters(['showNum'])}Copy the code

conclusion

  • stateIt is best not to call state directly in the component
  • mutationsIt stores methods that operate on data, but not asynchronously
  • actionsInside are methods to perform asynchronous operations
  • gettersIt is used to process the data in Store to form new data