vuex多种获取数据和调用方法的总结

1.获取state数据

1.普通获取:在computed属性中以一个函数的方法返回state中的数据

computed:{
cont(){
rteurn this.$store.state.num
}
}

2.胡子语法中获取state数据:

{{$store.state.num}}

3.函数辅助中获取state数据:在...mapstate(中传入一个字符串数组)

...mapstate(['num'])

4.modules拆分的模块,对象包着,键值对方式,值是箭头函数方式

...mapstate({num:state=>state.num})

2.调用mutation方法

1.普通调用store.commit()

//在组件中
store.commit('方法名')

2.函数辅助的调用,在...mapmutations中传入一个字符串方法名数组

//1.没有传参
...mapmutation(['add'])
//2.如果需要传参
在事件中
this.add(要传的参数)

3.modules拆分出来的模块化中调用,对象包着,键值对方式

...mapmutations({属性名:'文件夹名/方法名'})
//如果要传参,在事件中
this.属性名(要传的值)

3.调用actions方法

1.普通调用通过$store.dispatch()方法

//在vuex中
mutations:{
getadd(state,payoad){
state.num=payoad
}
}
actios只是异步提交mutations方法
actions:{
add(context,payoad){
//异步代码
settimeout(()=>{
//提交mutations,通过commit
comtext.commit('mutations方法名',payoad)
},1000)
}
}

//在组件中调用
this.$store.dispatch('异步方法名',要传的值)

2.函数辅助调用,给...mapactions传入一个字符串方法名数组

//1.没有传参
...mapactions(['异步方法名'])
//2.如果要传参,在事件中调用
this.异步方法名(要传的参数)

3.modules拆分出来的模块,对象包着,以键值对方式

...mapActions({属性名:'文件夹名/方法名'})
//如果要传参,在事件中
this.属性名(要传的值)