Actions

Actions 相当于组件中的 methods。 它们可以使用 defineStore() 中的 actions 属性定义，并且它们非常适合定义业务逻辑。与它们不同，actions 可以是异步的，您可以在其中await 任何 API 调用甚至其他操作！下面我们用promise来尝试。

// store/index.ts
export const useRegtores = defineStore('register',{
    state: () => {
        return{
            registerStatus: false,
        }
    },
    actions:{
        async registerUser(login, password) {
            const data = await registerUser(login, password);
            this.registerStatus = data;
        },
    }
    
})

// store/index6.ts
export const registerUser = (login: string,password: string) =>{
    return new Promise((resolv,reject)=>{
        setTimeout(() => {
            resolv("registerUser finish!")
        }, 3000);
    })
}

调用 Action 时，一切都会自动推断！Actions 像 methods 一样被调用,例如下面的useRegtore.registerUser();

// App
<script setup>

import { useRegtores } from "@/store";

const useRegtore = useRegtores();

const regisHandle = () => {
  useRegtore.registerUser();
};

</script>
<template>
  <div>数目为：{{ useRegtore.registerStatus }}</div>
  <button @click="regisHandle">注册</button>
</template>

访问其他 store 操作

与 getters 一样，操作可以通过 this 访问 实例并提供完整类型（和自动完成✨）支持。

订阅 Actions

const unsubscribe = useRegtore.$onAction(
    ({
      name, // action 的名字
      store, // store 实例
      args, // 调用这个 action 的参数
      after, // 在这个 action 执行完毕之后，执行这个函数
      onError, // 在这个 action 抛出异常的时候，执行这个函数
    }) => {
      // 如果 action 成功并且完全运行后，after 将触发。
      // 它将等待任何返回的 promise
      after((result) => {
        console.log("异步成功！")
      })
      // 如果 action 抛出或返回 Promise.reject ，onError 将触发
      onError((error) => {
        console.warn("异步失败！")
      })
    }
  )

当promise reslove时候。订阅回调则会进入after。当promise reject时候。onError。这对于异步请求数据来说是方便的。

export const registerUser = (login: string,password: string) =>{
    return new Promise((resolv,reject)=>{
        setTimeout(() => {
            resolv("registerUser finish!")
        }, 3000);
    })
}

订阅 Actions移除

默认情况下，action subscriptions 绑定到添加它们的组件（如果 store 位于组件的 setup() 内）。 意思是，当组件被卸载时，它们将被自动删除。 如果要在卸载组件后保留它们，请将 true 作为第二个参数传递给当前组件的 detach action subscription。

也可以直接手动移除：unsubscribe()

总结

其实看下来会发现，actions 和 getter 能力相差不大。只是在异步中需要它。其他情况如果偏于计算，直接使用 getter 即可。如果偏义务逻辑的放入actions中，就像文章开头就说它们非常适合定义业务逻辑。