One. What is vuex

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

1.1 advantages:

Centralized management of shared data in Vuex, easy to develop and maintain, and efficient data sharing between components, improving development efficiency. Data stored in Vuex are responsive and can be synchronized with pages in real timeCopy the code

1.2 What Kind of Data is suitable for storing in Vuex:

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.

1.3 template

  • main.js
import Vue from 'vue' import App from './App.vue' import store from './store' Vue.config.productionTip = false new Vue({  store, render: h => h(App) }).$mount('#app')Copy the code
  • store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

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

State data source

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

// Create store data source, 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

2.1 The first way a component uses data in state:

This.$store.state. The global data name

this.$store.state.count

2.2 A second way for components to use data in state:

MapState maps to computed properties

1. Import mapState functions from vuEX as required

import { mapstate } from 'vuex'

2. Map global data needed by the current component to computed properties of the current component using the mapState function imported just now:

MapState import {mapState} from 'vuex' export default {data() {return {}}, computed: {// mapState can take arguments in the form of arrays or objects and map them to calculated properties, as shown in the following examples. MapState (['count']), // mapState({ xCount:state => state.count }) }, }Copy the code

The latest count value is: {{xCount}}

Mutations change the data in the store

Note: only the function in mutations has the right to modify state’s data

Note: mutations cannot include asynchronous operations.

3.1 Only the function on mutations has the right to modify state's data

  • ① Only change the Store data through mutations, not directly operate the data in the Store.
  • (2) Although the operation is a little more complicated in this way, all data changes can be monitored centrally
Const store = new Vuex. Store ({state: {count: 0}, mutations: {the add (state) {/ / the status state. Count++}}})Copy the code

3.2 This. codestore.com MIT () Trigger mutations(the first trigger mutations)

Increment() {
  this.$store.commit('add')
},
Copy the code
  • Transfer values when triggering mutations
IncrementN(){ this.$store.commit('addN',5) } mutations: Count ++}, addN(state,step){// Change state state.count+ = step}},Copy the code

3.3 MapMutations mapping as a method (the second triggering mutations)

1. Import the mapMutations function from VUEX on demand

import {mapMutations} from 'vuex'

2. Map the methods function of the current component through the mapMutations function just imported on demand.

// store mutations: Count ++}, sub(state) {state.count--}, addN(state, State. count += step}, subN(state, step) {state.count -= step}}, // A import {mapState,mapMutations} from 'vuex' methods:{... MapMutations ([' sub ', 'subN']), and decrement () {/ / call this. Sub ()}, decrementN () {enclosing subN (5)}}Copy the code

Actions deals with asynchronous operations

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.

4.1 This.$store.dispatch triggers Actions

  • store.js
// define Action const store = new vuex.store ({//... Mutations: {// Only the function in mutations has the right to change state. // Asynchronous operations cannot be performed on mutations. Add (state) {state.count++}}, actions: {// The data in state cannot be modified directly in actions, but must be modified via mutations. addAsync(context) { setTimeout(() => { context.commit('add') }, 1000); }}})Copy the code
  • Component A
Action methods:{handle(){this.$store. Dispatch ('addAsync')}}Copy the code

4.2 Map mapActions to methods

1. Import mapActions functions from Vuex as needed.

import {mapActions} from 'vuex'

2. Map the actions function to the methods of the current component.

methods:{ ... mapActions(['subAsync']), decrementAsync(){ this.subAsync() } }Copy the code
  • store.js
Actions: {// Data in state cannot be modified directly in actions, but must be modified via mutations. subAsync(context){ setTimeout(() => { context.commit('sub') }, 1000); }}Copy the code

Getters (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.Copy the code
// define Getter const store = new vuex. store ({state:{count:0}, getters: {showNum(state) {return 'current count is [' + state.count +'] '}},})Copy the code

5.1 Access by this.$store.getters. Name

This $store. Getters. Name

5.2 mapGetters are mapped to calculated attributes

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

Six, shorthand

In fact, 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

<button @click="decrementAsync">-1Async</button> import {mapActions} from 'vuex' //... Omit some code methods: {... mapActions(['subAsync']), decrementAsync(){ this.subAsync() } },Copy the code

It can actually be shortened to:

<button @click="subAsync">-1Async</button> import {mapActions} from 'vuex' //... Omit some code methods: {... mapActions(['subAsync']), },Copy the code

If you have parameters, you can also add them directly, like this:

<button @click="subAsync(5)">+5</button> import {mapActions} from 'vuex' //... Omit some code methods: {... mapActions(['addAsync']), },Copy the code