跳到主要内容

Pinia Actions

在 Pinia 中，Actions 是用于处理异步操作或复杂逻辑的函数。它们类似于 Vuex 中的 actions，但更加简洁和灵活。Actions 可以修改状态（state），也可以调用其他 actions 或 getters。通过 Actions，你可以将业务逻辑与组件解耦，使代码更易于维护。

什么是 Actions？​

Actions 是 Pinia store 中的方法，用于执行异步操作或复杂的同步操作。它们可以访问 store 的状态（state）、getters 和其他 actions。与 Vuex 不同，Pinia 的 Actions 是普通的 JavaScript 函数，因此你可以直接调用它们，而不需要通过 dispatch。

定义 Actions​

在 Pinia 中，Actions 定义在 store 的 actions 属性中。以下是一个简单的示例：

javascript
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
    async incrementAsync() {
      await new Promise((resolve) => setTimeout(resolve, 1000));
      this.count++;
    },
  },
});

在这个示例中，我们定义了两个 actions：

  • increment：同步增加 count 的值。
  • incrementAsync：异步增加 count 的值，模拟了一个延迟操作。

使用 Actions​

在组件中，你可以直接调用 store 中的 actions。以下是如何在 Vue 组件中使用上述 actions 的示例：

vue
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script setup>
import { useCounterStore } from './stores/counter';

const counterStore = useCounterStore();
const { count } = storeToRefs(counterStore);
const { increment, incrementAsync } = counterStore;
</script>

在这个示例中，我们通过 useCounterStore 获取 store 实例，并解构出 increment 和 incrementAsync actions。然后，我们将这些 actions 绑定到按钮的点击事件上。

Actions 的实际应用场景​

Actions 非常适合处理以下场景：

  1. 异步数据获取：例如从 API 获取数据并更新状态。
  2. 复杂的状态更新：例如根据多个条件更新状态。
  3. 副作用操作：例如在状态更新后触发其他操作。

以下是一个从 API 获取数据的示例：

javascript
import { defineStore } from 'pinia';
import axios from 'axios';

export const useUserStore = defineStore('user', {
  state: () => ({
    users: [],
    loading: false,
  }),
  actions: {
    async fetchUsers() {
      this.loading = true;
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/users');
        this.users = response.data;
      } catch (error) {
        console.error('Failed to fetch users:', error);
      } finally {
        this.loading = false;
      }
    },
  },
});

在这个示例中，fetchUsers action 从 API 获取用户数据，并在获取完成后更新 users 状态。

总结​

Pinia 的 Actions 是处理异步操作和复杂逻辑的强大工具。通过将业务逻辑封装在 actions 中，你可以使组件更加简洁和专注于 UI 渲染。Actions 还可以与其他 Pinia 功能（如 state 和 getters）无缝集成，使状态管理更加灵活和高效。

附加资源​

练习​

  1. 创建一个 Pinia store，定义一个 action 来模拟用户登录，并在登录成功后更新用户状态。
  2. 修改 incrementAsync action，使其在延迟后增加 count 的值，并在组件中显示加载状态。

通过完成这些练习，你将更好地理解 Pinia Actions 的使用方法。