1.直接调用actions
(1).直接使用
this.$store.dispatch('action名', 参数)
(2).map辅助函数
methods: {
...mapActions(['mutation名']),
...mapActions({'新名字': 'mutation名'})
}
2.使用modules中的actions(namespaced:true)
(1).直接使用
this.$store.dispatch('模块名/action名', 参数)
(2).map辅助函数
methods: {
...mapActions('模块名', ['xxx']),
...mapActions('模块名',{'新名字': 'xxx'})
}
小结---->我们可以使用Action来修改state,这一点是类似于 mutation的,不同在于:
- action中可以通过调用 mutation来修改state,而不是直接变更状态。
- action 可以包含**任意异步**(例如ajax请求)操作。
注意 ! ! ! 在定义时--> 它的第一个参数是context对象会自动传入,它与store实例具有相同的方法和属性
调用Action方法发送异步请求更改state数据
new Vuex.store({
// 省略其他...
actions: {
// context对象会自动传入,它与store实例具有相同的方法和属性
action的名字: function(context, 载荷) {
// 1. 发异步请求, 请求数据
// 2. commit调用mutation来修改/保存数据
// context.commit('mutation名', 载荷)
}
}
})
将ajax请求放在actions中有两个好处:
- 代码得到了进一步封装。将发ajax和保存数据到vuex绑定在一起。
- 逻辑更通顺。如果数据需要保存在Vuex的state中,那从接口处获取数据的操作就定义在Vuex的actions中