A Vue project using VUEX for data sharing

What is Vuex

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

Ii. Vuex was introduced into the project

Install vuEX dependency packages

 npm install vuex --save
Copy the code

Import the vuex package from main.js

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

Creating a Store object

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

Mount the Store object to the Vue instance

New Vue({el: '#app', render: h => h(app), router, // render: h => h(app), render: h => h(app), router, //Copy the code

3. Core concepts of Vuex

State,Mutation, Action, Getter State: used to store data Mutation: updated data in State (synchronous) Action: performed asynchronously here Getter: The data in Store are processed to form new data without changing the original data in state

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

Vue.use(Vuex)
export default new Vuex.Store({
  State :{},
  Mutation :{},
  Action :{},
  Getter :{}
})

Copy the code

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

Component access to data in State:

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

The second way

Import mapState functions as needed 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 attributes of the current component: 2. Map global data to computed properties of the current component

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

Mutation is used to change data in the Store.

① Only Store data can be changed by mutation, and data in Store can not be manipulated directly. (2) Although the operation is a little more complicated in this way, all data changes can be monitored centrally. (3) Mutation method, the first parameter is state definition Mutation

Open mutations = new vuex. store ({state: {count: 0}, mutations: {add(state) {// change the status state.count++; }}});Copy the code

Trigger mutation Mode 1:

Methods: {handle1() {$this. apply ($store.mit)}}Copy the code

Mutations can pass parameters when triggered:

Mutations const store = new vuex. store ({state: {count: 0}, mutations: AddN (state, step) {// Change status state.count += step; }}});Copy the code

Trigger the mutation

Methods: {handle2() {use this. Codestore.com MIT ('addN', 3)}}Copy the code

The second way to trigger mutations is:

Import the mapMutations function from VUEX on demand

import { mapMutations } from 'vuex'
Copy the code

Based on the imported mapMutations function, map the necessary mutations function to the methods of the current component: 2. Map the specified mutations function to the methods function of the current component

//add,addN can be used as methods: {... mapMutations(['add', 'addN']) }Copy the code

Action is mainly 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. In action, data in state cannot be modified directly; a mutation must be triggered via context.mit ()

Define the Action

const store = new Vuex.Store({ // ... Mutations: {add(state) {state.count++; } }, actions: { addAsync(context) { setTimeout(() => { context.commit("add"); }, 1000); }}});Copy the code

Trigger Action this.$store.dispatch(‘ method name defined in Action ‘)

Methods: {handle() {this.$store. Dispatch ('addAsync')}}Copy the code

An asynchronous actions task is triggered with parameters:

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

Trigger Action

Methods: {handle() {this.$store. Dispatch ('addNAsync', 5)}Copy the code

The second way to trigger actions is:

Import mapActions functions from VUEX as needed

import { mapActions } from 'vuex'
Copy the code

Map the required actions to the current component’s methods using mapActions. Maps the specified Actions function to the methods function of the current component

methods: { ... mapActions(['addASync', 'addNASync']) }Copy the code

The ###Getter is used to process the data in the Store into new data. (1) Getters can form new data after processing existing data in Store, similar to Vue calculation properties. ② 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 "Current count is [" + state.count +"] "; }}});Copy the code

The first way to use Getters is:

This $store. Getters. NameCopy the code

The second way to use getters is:

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

Conclusion:

1. Benefits of unified state management using Vuex:

(1) Centralized management of shared data in VUEX makes it easy to develop and maintain. (2) Efficient data sharing between components improves development efficiency. (3) Data stored in VUEX is responsive and can be synchronized with pages in real time

2. Objects that trigger all four of vuEX have two modes

State this.$store.state. 表 示 Mutation this. timeout ('Mutation method name ') Ation this.$store. Getters this.$store.getters. The name of theCopy the code

Method 2: Import components

import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
Copy the code

Use expansion operators/extension operators directly in evaluating attributes or methods (…) It is ok

computed: { ... mapState(['count']), ... mapGetters(['showNum']) }, methods: { ... mapMutations(['sub', 'subN']), ... mapActions(['subAsync', 'subNAsync']), }Copy the code

In the above code, count and showNum can be used directly as calculated properties, while sub, subN, subAsync, and subNAsync can be used directly as methods

3. Pay special attention to:

① Do not use this.$store.state directly in components. 2. Only the function defined in mutations has the right to modify the data in state, not in the mutations function. (3) In actions, data in state cannot be modified directly. A mutation must be triggered by context.mit ()