vue3中使用store的actions

在Vue 3中，使用Vuex来管理应用状态是非常常见的方式。Vuex 5.x是与Vue 3兼容的版本，其中引入了对Vue 3 Composition API的支持。在Vuex 5中，`actions` 用于处理异步操作和一些复杂的同步操作，它们可以提交（commit）到mutation，进而触发状态的变化。

使用`actions`通常遵循以下步骤：

1. 定义`actions`：在Vuex store中定义`actions`，它们可以接收一个`context`参数，这个参数包含了`state`、`getters`、`commit`等方法。

2. 分发`actions`：在组件中，可以通过`store.dispatch('action名')`来分发（dispatch）一个`action`，从而执行异步或复杂操作。

3. 提交`mutations`：`actions`内部通过调用`commit`方法来提交`mutations`，`mutations`是唯一能够改变state的方式。

4. 使用`async`函数：`actions`可以是普通函数也可以是异步的`async`函数，这样可以在函数内部使用`await`来处理异步操作。

下面是一个简单的例子：

// store/index.js
import { createStore } from 'vuex';

export default createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  }
});

在上述代码中，我们定义了一个`incrementAsync`的`action`，它会在1秒后提交`increment`的`mutation`。

在组件中使用：

// 在Vue组件中
export default {
  methods: {
    increment() {
      this.$store.dispatch('incrementAsync');
    }
  }
};

组件中的`increment`方法调用了`store.dispatch`来执行异步操作。