1. Vuex is introduced

1.1 What is VUEX?

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

1.2 What are the benefits of unified data management using VUEX?

(1) It can centrally manage shared data in VUEX, making it easy to develop and share data.

(2) It can efficiently realize data sharing of components and improve development efficiency.

(3) The data stored in VUEX are all responsive and can keep data and page synchronization in real time.

1.3 What Kind of data is suitable to store in Vuex?

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

2. Basic use of VUex

2.1 Installing vuEX Dependency Packages

npm install vuex --save
Copy the code

2.2 Importing the VUEX Package

import Vuex from 'vuex'
Vue.use(Vuex)
Copy the code

2.3 Creating store Objects

const store = new Vuex.Store({
     state : {
        count: 0
     }
})
Copy the code

2.4 Mounting a Store object to a Vue instance

New Vue ({el: '#app', router, // create a shared data object, mount it to the Vue instance // all components, you can get global data directly from store store})Copy the code

3. The core concept of Vuex

3.1 The key concepts in Vuex are as follows:

. State

. Mutation

. Action

. Getter
Copy the code

3.2 the State

State provides the only common data source, and all shared data is stored in the Store State.

Const store = new vuex. store({state: {count: 0}}) const store = new vuex. store({state: {count: 0}})Copy the code

The first way a component can access data in State:

This.$store.state. The global data nameCopy the code

A second way for components to access data in State:

Import {mapState} from 'vuex' import {mapState} from 'vuex'Copy the code

Use the mapState function you just imported to map global data needed by the current component to computed properties of the current component:

// 2. Map global data to the computed property of the current component, computed: {... mapState(['count']) }Copy the code

3.3 Mutation

Mutation is used to change data in the Store

(1) Only Store data can be changed through mutation, and data in Store can not be directly operated.

(2) Although the operation is slightly complicated in this way, the change of data can be centrally monitored.

Mutations: mutations const store = new vuex. store ({state: {count: 0}, mutations: {add(state) {count++}}})Copy the code
This.upgradesmutation methods: {handle() {this.upgradesmutations ())}}Copy the code

Arguments can be passed when mutation is triggered:

Mutations const store = new vuex. store ({state: {count: 0}, mutations: AddN (state, step) {// Change status state.count += step}}})Copy the code
Use this. code. store.mit ('addN', 3)}}Copy the code

This. codestore.com MIT () is the first way to trigger mutation and the second way to trigger mutations:

MapMutations} import {mapMutations} from 'vuex'Copy the code

Based on the imported mapMutations function, map the required mutations function to the methods of the current component:

2. map the specified mutations function to the methods function of the current component (methods: {... mapMutations(['add', 'addN']) }Copy the code

3.4 Ation

An asynchronous actions task is triggered with parameters:

// define Action const store = new vuex.store ({//... Mutations: {addN(state, step) {state.count += step}}, actions: { addNAsync(context, step) { setTimeout(() => { context.commit('addN', step) }, 1000) } } })Copy the code
Action methods: {handle() {this.$store. Dispatch ('addNAsync', 5)}}Copy the code

This.$store.dispatch() is the first way to trigger actions and the second way to trigger actions:

Import {mapActions} from 'vuex' import {mapActions} from 'vuex'Copy the code

Map the required actions functions to the current component’s methods using the mapActions function we just imported:

// 2. Map the specified actions to the current component's methods function (methods: {... mapActions(['addASync', 'addNASync']) }Copy the code

3.5 the Getter

Getters are used to process data in a Store to form new data. (1) Getter can form new data after processing the existing data in Store, similar to the calculation attribute of Vue. (2) When the data in the Store changes, the data in the Getter also changes.

// define Getter const store = new vuex. store({state: {count: 0}, getters: {showNum: State => {return 'count + state +' '}}})Copy the code

The first way to use Getters is:

This $store. Gettters. NameCopy the code

The second way to use getters is:

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