actions的使用

作用：修改 state 数据，异步修改。

10.3 节讲解 mutations 修改 state 中的数据，但 mutations 只能同步修改。如果 mutations 出现异步操作，那么则不能继续操作 state 中的数据，而要在 mutations 中模拟异步操作，接 10.3.1 节代码，如下所示。

Vuex 代码如下。

mutations: {
  getAdd(state, data) {
    // 使用 setTimeout 模拟异步操作
    setTimeout(() => {
      state.num++;
      console.log(data);
    }, 1000);
  }
}

HelloWorld 组件代码不变，此时单击自增按钮，会出现页面中的数据和 state 中的数据不统一的情况。

出现数据不统一说明 mutations 不能操作异步数据，需要使用 actions，代码如下。

Vuex 代码如下。

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    num: 10
  },
  getters: {
    newnum(state) {
      return state.num + '元';
    }
  },
  mutations: {
    getAdd(state) {
      state.num++;
      console.log(data); // 注意: 此处的 data 是 undefined，应在 commit 时传入
    }
  },
  actions: {
     //1．定义方法，传入形参
    getAddActions({ commit }) { // actions 传入 context 对象
      //2．使用commit方法触发mutations中的方法
      commit('getAdd'); // 通过 context.commit 调用 mutation
    }
  }
});

export default store;

代码解析如下。

actions 中的方法并不能直接操作 state 中的数据，需要触发 mutations 中的方法，最终还得通过 mutations 中的方法修改数据。

HelloWorld 组件代码如下。

methods: {
  addnum() {
    // mutations 处理同步
    // this.$store.commit('getAdd', { id: 1, name: '小明' }); // 如果需要传递参数，可以这样写
    // actions 处理异步
    this.$store.dispatch('getAddActions'); // 如果 action 不需要参数，可以这样写

    // 或者，传递参数给 action
    // const payload = { id: 1, name: '小明' };
    // this.$store.dispatch('getAddActions', payload);
  }
}

代码解析如下。

通过 this.$store.dispatch 触发 actions 中的方法，运行程序，可以实现页面和 state 数据统一，最后在 actions 中模拟异步操作，代码如下。

actions: {
  getAddActions({ commit }) { // 使用解构赋值，直接获取 commit
    setTimeout(() => {
      commit('getAdd');
    }, 1000);
  }
}

运行程序，HelloWorld 中的数据和 state 中的数据可以实现统一，说明操作异步数据要使用 actions。

下面讲解异步参数传递。

在调用 actions 中方法时，同样可以把组件中的数据传递给 Vuex，代码如下。

HelloWorld 组件代码如下。

methods: {
  addnum() {
    // 传递数字 100
    this.$store.dispatch('getAddActions', 100);
  }
}

Vuex 组件代码如下。

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    num: 10
  },
  getters: {
    newnum(state) {
      return state.num + '元';
    }
  },
  mutations: {
    // 3. 最终在 mutations 中接收用户传递的数据
    getAdd(state, data) {
      state.num++;
      console.log(data);
    }
  },
  actions: {
    // 1. 在方法中接收
    getAddActions(context, data) {
      setTimeout(() => {
        // 2. 触发 mutations 中方法时传递数据
        context.commit('getAdd', data);
      }, 1000);
    }
  }
});

export default store;

代码解析如下。

首先在 actions 中的方法接收数据，等触发 mutations 中方法时把接收的数据传递出去，最终在 mutations 中的方法接收数据。