Vuex的介绍
一：基本使用
-
新建实例化对象
const store = new Store.Vuex({}) -
state => 相当于data
state:{
name:‘xxx’
}
调用形式：this.$store.state.xxx -
getters => 相当于computed
getters:{
contactName(state){
xxx
}
}
调用形式： this.$store.getters.xxx 默认传入state -
mutations => 相当于methods
mutations:{
changeName(state,[params]){
xxx
}
}
调用形式 ：this.$store.commit(‘functionName’,params)
state为默认传入的第一个参数，之后才是自己需要传递的数据 -
actions => 相当于 methods
action:{
changeNameAsync(context,[params]){
xxx
}
}
调用形式： this.$store.dispatch(functionName,params)
context默认传入 拥有和new Store.Vuex()实例化对象一样的数据和方法 -
mutations和actions的区别
mutations和actions都可以对state中的数据进行操作，唯一不同的地方在于mutations中不能进行异步操作
setTimeOut,setInterval这些异步操作都只能在actions中进行。 -
modules模块化
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
}
})
二：辅助函数的使用
-
引入
import {mapState,mapGetters,mapMutations,mapActions} from ‘Vuex’
此处需要注意 Vuex的大小写要与main.js引入时一致 否则会出现警告 -
使用
辅助函数是官方提供的state的语法糖，在引入较多的state值的时候，可以利用此函数简化声明
state和getters归入到computed中去映射 mutations和actions归入到methods中去映射
//默认形式的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,
}
}
辅助函数使用的四种形式(/以mapState为例 其他的辅助函数用法基本类似)
// 形式一 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'
})
}