Vue Pinia 使用箭头函数访问 getter 中的其他函数

Question

示例商店

  getters: {
    setName: (state) => (string: string) => {
      state.user.username = string;
    },
    setUser: (state) => {
      setName('Tom'); // setName is undefined.
    }
  }

有什么方法可以访问箭头函数内的 setName 吗？

示例仅显示您可以this进入正常函数 https://pinia.vuejs.org/core-concepts/getters.html#accessing-other-getters

Answer 1

首先，正如 Phil 指出的那样，getters特征不应该改变状态。由于 Pinia 中不包含突变，因此actions这是可行的方法。

此外，箭头函数不具有this对象引用。因此，如果您想访问状态中的任何其他存储方法或变量，您应该使用常规 javascript 函数语法创建一个操作，例如

import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
  state: (): myState => ({
    user: {name: 'myname'},
  }),
  getters: {
    getName: (state: myState) => state.user.name,
  },
  actions: {
    setName(newName: string) {
      this.user.name = newName
    },
  },
})

然后在已导入定义存储的任何外部文件中，像这样调用操作

import { useUserStore} from '~/stores/user'
const store = useUserStore()
store.setName('Tom')

注意：在 Pinia 操作中，您可能希望始终使用常规 javascript 函数语法，因为它们负责更改您所在州的数据。