Actions

1import Vue from "vue";
2import Vuex from "vuex";
3
4Vue.use(Vuex);
5
6export default new Vuex.Store({
7  state: {
8    num: 10,
9  },
10  mutations: {
11    addNum(state, payload) {
12      state.num += payload;
13    },
14  },
15  actions: {
16    changeNum(context, payload) {
17      // context 包含环境所处的上下文对象
18      setTimeout(() => {
19        context.commit("addNum", payload);
20      }, 1000);
21    },
22  },
23});

1<template>
2  <div>
3    <p>{{ $store.state.num }}</p>
4    <button @click="asyncClick">异步按钮</button>
5  </div>
6</template>
7
8<script>
9export default {
10  data() {
11    return {};
12  },
13  methods: {
14    asyncClick() {
15      // 调用actions中的方法
16      this.$store.dispatch("changeNum", 20);
17    },
18  },
19};
20</script>

Actions#

Actions