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

1. 获取 state 数据

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

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

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

<p>{{$store.state.num}}</p>

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. 属性名 (要传的值)