Introduction to Vuex
One: Basic use
-
Create a new instantiated object
const store = new Store.Vuex({}) -
state => is equivalent to data
state: { name: 'xxx' } call form: this.$store.state.xxx -
getters => equivalent to computed
getters:{ contactName(state){ xxx } } call form: this.$store.getters.xxx is passed in state by default
-
mutations => equivalent to methods
mutations: { changeName(state,[params]){ xxx } } call form: this.$store.commit('functionName',params) state is the first parameter passed in by default, and then is the data you need to pass
-
actions => equivalent to methods
action: { changeNameAsync(context,[params]){ xxx } } call form: this.$store.dispatch(functionName,params) context is passed in by default and new Store.Vuex() instantiates the object same data and method
-
The difference between mutations and actions
Both mutations and actions can operate on data in the state. The only difference is that asynchronous operations such as
setTimeOut and setInterval cannot be performed in mutations. These asynchronous operations can only be performed in actions. -
modulesModularization
const ModuleA = {
namespaced: true,
state:{
},
getters:{
},
mutations:{
},
actions:{
},
}
const ModuleB = {
namespaced: true,
state:{
},
getters:{
},
mutations:{
},
actions:{
},
}
const store = nre Store.Vuex({
modules:{
//形式一 调用store.state.a/b
a:moduleA,
b:moduleB,
//形式二 调用store.state.moduleA/moduleB
mudlueA,moduleB
}
})
Two: Use of auxiliary functions
-
Introduce
import {mapState, mapGetters, mapMutations, mapActions} from 'Vuex'
Here you need to pay attention to the capitalization of Vuex to be consistent with that of main.js, otherwise a warning will appear -
Use
The helper function is the grammatical sugar of the officially provided state. When introducing more state values, you can use this function to simplify the declaration
state and getters into computed to map mutations and actions into methods to map
//默认形式的Vuex维护
data(){
return{
// 如果需要引入的state太多的话 就需要写很多重复的代码
name:this.$store.state.name,
age:this.$store.state.age,
sex:this.$stroe.ModuleA.sex,
height:this.$store.ModuleB.height,
mergeName:this.$store.getters.mergeName,
}
}
Four forms of auxiliary functions (/Take mapState as an example, other auxiliary functions are basically similar)
// 形式一 mapState传入的参数为对象
computed:mapState({
// 原来的计算属性保留
fn1(){
return xxx}
fn2(){
return xxx}
fn3(){
return xxx}
// 维护Vuex的内容
// 箭头函数的形式 this指向new Store.Vuex()的实例化对象 store
name:state => state.name,
// 键名和state的值名称一致
age:'age',
// 正常函数定义的形式 需要使用Vue实例化对象中data的数据时必须使用该形式
sex(state){
return this.tips + state.sex
}
})
// 形式二 mapState传入的参数是数组
computed:mapState([
'name', //映射 this.name = this.$store.state.name
'age',
'sex',
// 此形式要求映射的computed的名称 和 state中属性的名称一致
])
// 形式三 使用...拓展运算符
computed:{
//原本的计算属性保留
mergeStr(){
xxx}
//维护Vuex 此形式将mapState函数返回的对象和原本的内容合并在一起
...mapState({
xxx})
// 也可以使用...mapState([xxx])的形式 但是在之前的基础上多了一个条件 state的值不能存放在module中
}
// 形式四 ...配合module
computed:{
// mapState等辅助函数 第一个参数可以指定module中的模块名称
// 第二个参数 在进行对应的映射操作
...mapGetters('footerStatus', {
isShow: 'isShow',
})
...mapGetters('collection', {
allList: 'renderCollects'
})
}