vuex中actions配合mutation处理axios请求

众所周知，vuex中actions一般用来做异步操作，像数据请求，定时器，都不应该直接写在mutation，像我就犯了这个错

Vuex

  mutations: {
    PLAY(state, obj) {
      const { id, name } = obj;
      // 播放歌曲
      axios({
        url: "/song/url",
        params: { id },
      }).then(({ data: { data } }) => {
          state.musicName = name;
          state.musicUrl = data[0].url;
       
      });
    },
  },

相关组件

 methods: {
    // 播放歌曲 调用全局播放事件
    player(id, name) {
      this.$store.commit("PLAY", { id, name });
    },
  }

很明显我这直接跳过了actions，让mutation来进行异步操作的，mutation本应都是同步操作

正确写法

  actions: {
    // 异步操作写在actions里
    aPlay({ commit }, songMsg) {
      axios({
        url: "/song/url",
        params: { id: songMsg.id },
      }).then(({ data: { data } }) => {
        commit("PLAY", { data, name: songMsg.name });
      });
    },
  },
  mutations: {
    // 播放歌曲
    PLAY(state, obj) {
      const { data, name } = obj;
        state.musicName = name;
        state.musicUrl = data[0].url;
    },
  },

将action分发给组件

  methods: {
    // 播放歌曲 调用全局播放事件
    player(id, name) {
      this.$store.dispatch("aPlay", { id, name });
    },
    }

actions里的函数带有两个参数

1. 第一个是context，上下文 我那里直接{commit} 进行了对象解构写法
2. 第二个就是组件中传来的参数了，因为传了两个参数，所以用了一个对象来接收

mutations里的函数带有两个参数

1. 第一个是state，vuex中的state，不要带this，
2. 第二个就是组件直接commit来的参数，或者action中commit来的参数