Pinia中Getter调用其他Getter：state.getterName为何可用？是否需改用this？

问题背景 #

我在Vue 3中使用Pinia创建状态仓库，仓库内经常出现Getter调用其他Getter的场景。此前一直通过state.getterName的方式引用其他Getter，虽能正常运行，但偶尔会出现「Getter不存在」的警告。后来发现Pinia官方文档明确说明，在Getter内部引用其他Getter应使用this.语法。

当前代码写法 #

const useMyStore = defineStore('myStore', {
    state:() =>({
        state1: 100
    }),
    getters: {
        getterName1: (state) => {
           return state.state1 * 100
        },
        getterName2: (state) => {
           return state.getterName1 - 100
        }
    }
})

正确写法（修正后） #

注意：Getter中使用this时不能用箭头函数，需改用普通函数：

const useMyStore = defineStore('myStore', {
    state:() =>({
        state1: 100
    }),
    getters: {
        getterName1: (state) => {
           return state.state1 * 100
        },
        getterName2: function() {
           return this.getterName1 - 100
        }
        // 也可以用ES6简写：
        // getterName2() {
        //   return this.getterName1 - 100
        // }
    }
})

疑问解答 #

1. 错误使用state.getterName为何能生效？ #

Pinia初始化仓库时，会把所有Getter内部挂载到state的代理对象上作为便捷访问方式，但这属于非公开的内部实现细节，并非官方推荐用法。这种挂载不是同步完成的，只有当仓库初始化流程走完、Getter全部注册后，state上才会有对应的Getter属性。这也是你偶尔看到「Getter不存在」警告的原因——当访问时机早于Getter挂载时，就会出现未定义的情况。

2. 不使用this.会带来哪些风险？ #

• 运行时不稳定：Getter挂载到state的时机不固定，当仓库依赖复杂、初始化顺序变化时，容易出现getterName未定义的错误，导致页面崩溃。
• 响应式失效：Pinia的this在Getter中经过了响应式包装，能正确追踪依赖并维护缓存。直接访问state.getterName可能绕过响应式逻辑，导致Getter缓存不更新或依赖追踪错误。
• 版本兼容性问题：这种非规范用法未被官方文档认可，后续Pinia版本可能移除该内部逻辑，导致代码直接报错。
• 可读性差：不符合官方规范的写法会增加其他开发者的理解成本，维护时容易出错。

3. 是否需要重构仓库改用this.语法？ #

建议立即重构，理由如下：

• 遵循官方规范，避免未来版本的兼容性风险；
• 彻底消除偶尔出现的「Getter不存在」警告，提升代码稳定性；
• 保证响应式逻辑的正确性，避免潜在的缓存或更新异常；
• 代码更符合Pinia的设计意图，可读性和可维护性更高。

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