Vuex is a state management model specially developed for Vue.js applications . It uses centralized storage to manage the state of all components of the application and solve multi-component data communication.

(2) Benefits of using Vuex

1. It can centrally manage the shared data in vuex, which is easy for development and later maintenance;
2. It can efficiently realize data sharing between components and improve development efficiency;
3. The data stored in vuex is responsive and can be real-time Keep data and pages in sync;

(3) Five major blocks of Vuex

1. actions: initiate an asynchronous request

2. mutations: used to modify data

3. state: unified definition of public data

4. Getters: process the data in the state

5. modules: module splitting

(4) Vuex installation and environment construction

1. Enter npm i vuex@3 in the vscode terminal (note that vue2 corresponds to vuex3, and vue3 corresponds to vuex4)

2. Configure

(2.1) Create a store folder under src, and create an index.js file in the store

(2.2) Store configuration in index.js

import View from 'view'

// This file is used to create the most core part of store in vuex

// import vuex

import Vuex from 'vuex'

// You should use vuex first and then create a store, you can't write it in main.js, because import will store in advance

Vue.use(Vuex)

// Prepare actions - actions for responding to builds

const actions={}

// Prepare mutations - for manipulating data

const mutations={}

// Prepare state - used to store data

const state={}

// Create store to expose store

export default new Vuex.Store({

actions,

mutations,

state

})

(2.3) Inject store into Vue instance

Write in src/main.js

// import store

import store from './store/index'

const vm=new Vue({

the:'#app',

render: h=>h(App),

// Inject the Vue instance

store,

})

At this point, the Vuex environment is successfully built, and $store exists in any component

(2) Vuex-state defines public data and uses it in components

(1) What is Vuex-state

State is essentially an Object object

The role of state is to save public data (data shared among multiple components)

The state is reactive: if the data is modified, the corresponding value on the view will also change.

(2) Ways to access state data

Data format in public data state

// Prepare state - used to store data

const state={

// for logging and

sum:0,

school:'River University of Science and Technology',

subject:'Frontend'

}

1. Use { {$store.state.property name}} in the template

<template>

<h3>The current sum is: { {$store.state.sum}}</h3>

<template>

2. Use mapState

When there is too much data in the state, according to the principle of simple template data, it is more troublesome to use { {$store.state.property name}} for each data , which can be rewritten as a calculated property and directly use the property name in the template

(2.1), introduce mapState

import {mapState} from 'vuex'

(2.2), there are two ways to configure mapState in computed

computed:{

// Automatically generated, ... is the expansion operator, reading data from the state

...mapState({sum:'sum',school:'school',subject:'subject'}),

// Shorthand in the form of an array, the name of the generated computed property must be consistent with the name actually read

...mapState(['sum','school','subject']),

},

(2.3), read in the template

<h3>The current sum is: { {sum}}</h3>

<h3>I am in { {school}}, studying { {subject}}</h3>

(3) Vuex-getters define data and use it in components

(1) What is Vuex-getters

It is a computed property in Vuex, and when the Store data source changes, the return value of the Getter will be automatically updated.

(2) Ways to access data in getters

data in getters

// getters are used to process the data in the state

const getters={

bigSum(state){

return state.sum*10

}

}

1. Use { {$store.getters.property name}} in the template

<h3>The value after magnifying 10 times: { {$store.getters.bigSum}}</h3>

2. Use map Getters

(2.1), introduce mapGetters

import {mapState,mapGetters} from 'vuex'

(2.2), there are two ways to configure mapGetters in computed

//Same as using mapState

// ...mapGetters({bigSum:'bigSum'})

...mapGetters(['bigSum'])

(2.3), read in the template

<h3>The value after magnifying 10 times: { {bigSum}}</h3>

(4) Vuex-mutations modify public data

(1) What are mutations

Mutation is essentially a JavaScript function, specially used to change the data in the Store

Features: If you want to modify the data in State, you can only call the Mutation method, which is the only entry for modifying public data in Vuex.

Benefits: It can ensure the uniqueness of the modification source, which is convenient for debugging and later maintenance.

When defined: its first parameter is the state, and the second parameter is the load

When calling: use this.$store.commit('mutation name', payload) to call

Note: Mutation must be a synchronous function, and asynchronous code cannot be placed in Mutation

(2) How to use mutations

define format

new Vue.store({

// Prepare mutations - for manipulating data

const mutations={

// Each item is a function, mutation name: function(state [, load]){}, the function written at this time is to realize // the function of addition and subtraction, value is the value to be added and subtracted, and state is a must to be passed in

JIA(state,value){

state.sum+=value

},

JIAN(state, value){

state.sum-=value

},

JIAODD(state,value){

state.sum+=value

}

}

}

1, this.$store.commit('mutation name', see below)

When there are no redundant operations, you can go directly to mutations to skip actions

add(){

// According to the picture example, vue needs to call dispatch first, and then write actions in vux

this.$store.commit('JIA',this.number)

},

reduce(){

this.$store.commit('JIAN',this.number)

},

2. Use mapMutations in the methods method

Similar to the previous getters and state, first introduce-then use

// Use mapMutations to generate the corresponding method, which will call commit to practice mutations

...mapMutations({add:'JIA',reduce:'JIAN'}),

// Array writing method, the method name is the same as the name submitted in the commit, and the template is also modified

...mapMutations(['JIA','JIAN']),

Note : The use in the template needs to pass in the value number to be used for the function, otherwise an error will be reported

<button @click='add(number)'>+</button>

<button @click='reduce(number)'>-</button>

(5) Vuex-actions-send asynchronous requests

(1) What are actions

Action is essentially a JavaScript function, specially designed to handle asynchronous operations in Vuex

Actions is a configuration item of vuex

Function: Send an asynchronous request to get data, call mutations to save data, and encapsulate the entire ajax operation into Vuex

Main points:

Asynchronous request operations can be sent inside the action

Action modifies state indirectly: it modifies state by calling mutation

(2) The use of actions

define format

// Prepare actions- used to respond to the action of building, which is to respond to adding when the current number is odd, and to delay adding

//The name of actions (reduced version of store, load){}

const actions={

jiaOdd(miniStore,value){

if(miniStore.state.sum%2){

miniStore.commit('JIA',value)

}

},

jiaWait(miniStore,value){

setTimeout(()=>{

miniStore.commit('JIA',value)

},500)

}

}

1. Call actions in the component through this.$store.dispatch('actions name', parameter)

addSubtract(){

this.$store.dispatch('jiaOdd',this.number)

},

addWait(){

// All jia can use one

this.$store.dispatch('jiaWait',this.number)

}

2. Through map Actions

The usage is exactly similar to Vuex-mutations

Vuex construction and use

(1) Vuex

(1) What is Vuex