1.state
effect:
save public data
Format:
state() {return {property name: property value}}
use:
In this.$store.state.property name template { {$store.state.property name}} in the component
2.mutations
effect:
Call mutations to modify public data defined in state
Format:
mutations: { mutation name (state [, parameter]) { execution function }
use:
this.$store.commit('mutation name', see below)
Parameter Description:
The first parameter is required and represents the current state. It is not necessary to pass in the second parameter when using it
, which means the payload is optional. The data to pass in when using
3.getters
effect:
Process the data to get new data (equivalent to computed)
Format:
getters: {
// state is the public data state defined above
Getter name: (state) => {
execute function
return the value to return}
}
use:
$store.getters.getterName
4.actions
effect:
Send an asynchronous request to get data, call mutations to save data, and encapsulate the entire ajax operation inside Vuex
Format:
actions: {
// The context object will be passed in automatically, it has the same methods and properties as the store instance
async action name: function(context, payload) {
// 1. Send an asynchronous request and save the returned data
const res = await axios.get('path')
// 2. Call context.commit('mutation name', payload)
context.commit('function name in mutations', res.data.data)
}
use:
this.$store.dispatch('actions name', parameter)
5.modules
effect:
Split templates and disassemble complex scenes by modules
Format:
modules: { Module name 1: {
// If namespaced is true, you must add the module name when using attributes
namespaced: true,
state: {},
getters: {},
mutations: {},
actions: {} ,
modules: {}
},
}
use:
Get data item: { {$store.state.module name.data item name}}
Get getters: { {$store.getters['module name/getters name']}}
...
extension:
6. vuex-map helper function
usage:
1. Import (which attribute is used to import which attribute)
import { mapState,mapMutations,mapGetters,mapActions } from 'vuex'
2. call
2.1 Simple use
...map utility function(['xxx1','xxx2'] ) //xxx is the data or function you want to use
2.2 Need to change name
...map utility function({'new name':xxx1'})
2.3 Data in modules
...map utility function('module name', ['xxx'])
...map tool function('module name',{'new name':'xxx1'})
important point:
Use mapState mapGetters in computed
Use mapMutations mapActions in methods
The execution flow of both
Summarize
(poor drawing)
