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中，就像文章开头就说它们非常适合定义业务逻辑。
