如何在vuex中使用actions(异步请求)

6,718 阅读1分钟

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中