1. Vuex concept

Vuex is a mechanism to implement global state (data) management of components and facilitate data sharing among components.

Advantages:

  • Centralized management of shared data in Vuex for easy development and maintenance
  • It can efficiently realize data sharing between components and improve development efficiency
  • The data stored in VUEX is responsive and keeps the data in sync with the page in real time

In general, only data shared between components is necessarily stored in VUEX; For private data in the component, it is still stored in the component’s own data.

2. Basic use of Vuex

The installation

npm install vuex --save

The import

import Vuex from 'vuex'

Vue.use(Vuex)

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {},actions: {},modules: {}})Copy the code

3.state

State provides the only common data source, and all shared data is stored in the State of Store, which acts as a common container for storing data.

3.1 Data Access Mode 1

This.$store.state. Global data name access

{{this.$store.state. Count}}</h3>

In a template string, you don’t need to write this; this can be saved.

3.2 Data Access Mode 2

MapState maps to computed properties

Import the mapState function to map global data needed by the current component to computed properties of the current component

//1. Import mapState functions from vuEX as needed
import { mapState } from 'vuex'

export default {
  data() {
    return{}},computed: {
  	//2. Map to computed properties. mapState(['count']),}},Copy the code

4.Mutation

Mutations are used to change data in the Store.

  • Only the function on mutations has the right to modify state’s data
  • Mutations cannot include setTimeout.
export default new Vuex.Store({
  state: {count:0
  },
  mutations: {add(state){
	  // Change the state
	  state.count++
	}
  }
})
Copy the code

4.1 Data Access Mode 1

This. codestore.com MIT (method name)

//add.vue methods
add(){
  this.$store.commit('addN'.5)}// store.js
mutations: {
  addN(state,step){
    // Change the state
    state.count += step
  }
},
Copy the code

4.2 Data Access Mode 2

Import the mapMutations function from VUEX on demand and map it to the methods function of the current component.

// store.js
mutations: {
 jian(state) {
      state.count --
 },
 jianN(state, step) {
      state.count -= step
 }
},

// jian.vue
import { mapState,mapMutations } from 'vuex'
methods: {... mapMutations(['jian'.'jianN']),
  decrement(){
    / / call
    this.jian()
  },
  decrementN(){
    this.jianN(5)}
}
Copy the code

5.Action

Actions are used to handle 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.

Note: Data in state cannot be modified directly in Actions, but must be modified via mutations.

5.1 Data Access Mode 1

This. $store. Dispatch trigger Actions

// store.js
mutations: {
    // Only the function in mutations has the right to modify state, and cannot perform asynchronous operations on mutations.
    add(state) {
      state.count++
    }
  },
  actions: {
    // Data in state cannot be modified directly in Actions, but must be modified via mutations.
    addAsync(context) {
      setTimeout(() = > {
        context.commit('add')},1000); }},// add.vue
  methods: {handle(){
    // The first way to trigger actions
    this.$store.dispatch('addAsync')}}Copy the code

5.2 Data Access Mode 2

Import mapActions functions as needed from Vuex, mapping the specified actions functions to the methods of the current component methods.

//store.js
 actions: {
    jianAsync(context, step) {
      setTimeout(() = > {
        // commit is used to trigger mutation
        context.commit('jian', step)
      }, 1000)}},// jian.vue
import {mapActions} from 'vuex'.methods: {... mapActions(['jianAsync']),
  decrementAsync(){
    this.jianAsync(2)}}
Copy the code

6.Getter

Getters are used to process data in a Store to form new data.

  • A Getter does not modify the original data in the Store. It only acts as a wrapper to process the data in the Store and output it.
  • 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.

6.1 Data Access Mode 1

Access by name this.$store.getters

// store.js
getters: {
    showNum(state) {
      return 'The current latest quantity is [' + state.count + '】'}},// add.vue
  <h3>{{$store.getters.showNum}}</h3>
Copy the code

6.2 Data Access Mode 2

MapGetters map to computed properties

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

7.Module

Modular VUEX allows each module to have its own state, mutation, action and getters, making the structure very clear and easy to manage.

shorthand

Through the mapState, mapMutations mapActions, mapGetters mapping to come over to the calculation of attribute, or method can be called directly, not commit or dispatch

// add.vue
<button @click="addNumAsync">+1Async</button>
......
import {mapActions} from 'vuex'.methods: {
  ...mapActions(['addAsync']),
  addNumAsync(){
    this.addAsync()
  }
},
Copy the code

Abbreviated as:

<button @click="addAsync">+1Async</button>

import {mapActions} from 'vuex'.methods: {
  ...mapActions(['addAsync']),},Copy the code