1. Vuex overview

1.1 How to share data between components

Passing values ​​from parent to child: v-bind property binding
Child passing value to parent: v-on event binding
Sharing data between sibling components: EventBus
 $on the component that receives the data
 $emit the component that sends the data

1.2 What is Vuex

Vuex is a mechanism for implementing global state (data) management of components, which can easily share data between components.

1.3 The benefits of using Vuex to manage state uniformly

① Ability to centrally manage shared data in vuex, which is easy to develop and maintain
② It can efficiently realize data sharing between components and improve development efficiency
③ The data stored in vuex is responsive and can keep the data synchronized with the page in real time

1.3 What kind of data is suitable for storing in Vuex

In general, only data shared between components is necessary to be stored in vuex; for private data in components, it can still be stored in the data of the component itself.

2. Basic use of Vuex

1. Install vuex dependencies

 npm install vuex --save

1. import vuex package

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

1. Create store object

const store = new Vuex.Store({
 // The data stored in the state is the globally shared data
 state: { count: 0 }
})

1. Mount the store object into the vue instance

new Vue({
 el: '#app',
 render: h => h(app),
 router,
 // Mount the created shared data object to the Vue instance
 // All components can get global data directly from the store
 store
})

3. Core concepts of Vuex

3.1 Overview of core concepts

The main core concepts in Vuex are as follows:
 State
 Mutation
 Action
 Getter

3.2 State

State provides the only public data source, and all shared data must be stored in the Store's State.

 // Create a store data source to provide unique public data
 const store = new Vuex.Store({
 state: { count: 0 }
 })

The first way for components to access data in State:

this.$store.state.global data name

The second way for components to access data in State:

// 1. Import the mapState function as needed from vuex
import { mapState } from 'vuex'

Through the imported mapState function, the global data required by the current component is mapped to the computed property of the current component:

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

3.3 Mutation

Mutation is used to change the data in the Store.
① The Store data can only be changed through mutation, and the data in the Store cannot be directly manipulated.
② In this way, although the operation is a little more cumbersome, the changes of all data can be monitored centrally.

Parameters can be passed when triggering mutations:

this.$store.commit() is the first way to trigger mutations, and the second way to trigger mutations:

// 1. Import the mapMutations function as needed from vuex
import { mapMutations } from 'vuex'

Map the required mutations function to the methods method of the current component through the imported mapMutations function:

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

3.4 Action

Action s are used to handle asynchronous tasks.
If you change data through asynchronous operations, you must use Action instead of Mutation, but in Action you still need to trigger
Mutation indirectly changes data.

Carry parameters when triggering actions asynchronous task:

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

// 1. Import the mapActions function as needed from vuex
import { mapActions } from 'vuex'

Through the imported mapActions function, map the required actions function to the methods method of the current component:

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

3.5 Getter

The first way using getters:

this.$store.getters.name

The second way using getters:

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