如何更优雅地拆分Pinia中的signOut action方法？

你可以直接将外部定义的action函数赋值给actions对象，Pinia会自动帮你把函数的this绑定到当前的store实例上，不需要手动传递$this参数，也不需要额外的包装层。

步骤1：将action函数单独抽离（比如放到userActions.js文件） #

// userActions.js
export function signOut(payload) {
  // 这里的this会自动指向user store实例
  console.log(this.username, payload);
}

// 如果有其他action，也可以一起导出
export function updateUsername(newName) {
  this.username = newName;
}

步骤2：在store中导入并直接使用 #

import { defineStore } from "pinia";
import { signOut, updateUsername } from "./userActions";

export const useUserStore = defineStore("user", {
  state: () => ({
    username: "test-account",
  }),
  getters: {
    // ...你的getter逻辑
  },
  actions: {
    // 直接赋值单个action
    signOut,
    updateUsername,
    // 如果有多个，可以用对象展开更简洁
    // ...{ signOut, updateUsername }
  },
});

调用方式和之前完全一致 #

在组件中调用时，和原来的写法没有区别：

const userStore = useUserStore();
userStore.signOut(true); // 控制台输出 "test-account", true

注意事项 #

• 抽离的action必须是普通函数，不能用箭头函数。因为箭头函数的this是词法绑定的，无法被Pinia重定向到store实例，会导致无法访问this.username这类store属性。
• 如果需要在抽离的action中调用其他action或者getters，直接用this.otherAction()或者this.getterName即可，和在store内部定义的行为完全一致。

内容的提问来源于stack exchange，提问作者JCraine