Vue3中Pinia Store初始化是否正确？状态修改异常排查

我开发了一个Vue3应用，用于管理DND玩家的状态。以下是我的main.js代码：

import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";

const pinia = createPinia();

createApp(App).use(pinia).mount("#app");

我可以通过actions正常修改Store中的所有状态，但使用getter修改名为Status的状态时，多数时候会出现初始化异常导致无法修改（偶尔能正常工作）。此外，出现该问题时，Vue Devtools中无法找到Pinia。请问我的Store初始化是否正确？

我的getter代码如下：

getters: {
    statusChange: (state) => {
        state.characters.forEach((character) => {
            if (character.failures === 0 && character.successess === 0) {
                return (character.status = "");
            }
            if (character.failures === 3 && character.successess === 3) {
                return (character.status = "Schrodinger's cat");
            }
            if (character.failures === 3) {
                return (character.status = "Dead");
            }
            if (character.successess === 3) {
                return (character.status = "Alive");
            }
            return (character.status = "Risky");
        });
    },
},

我初始化Store的方式如下：

import { useStatusStore } from "../../stores/StatusStore";
const statusStore = useStatusStore();

• 核心问题：Getter的误用
  Pinia的Getter是纯计算属性，只能基于现有state派生新值，绝对不能直接修改state。你在getter里直接修改character.status，违反了Pinia的设计原则，会导致状态变更不可追踪，进而引发初始化异常、Devtools无法识别Pinia等问题。

• 正确实现：将状态修改移至Action
  把状态更新逻辑放到Action中，这才是Pinia中修改state的正确方式：

  actions: {
      updateCharacterStatuses() {
          this.characters.forEach((character) => {
              if (character.failures === 0 && character.successess === 0) {
                  character.status = "";
              } else if (character.failures === 3 && character.successess === 3) {
                  character.status = "Schrodinger's cat";
              } else if (character.failures === 3) {
                  character.status = "Dead";
              } else if (character.successess === 3) {
                  character.status = "Alive";
              } else {
                  character.status = "Risky";
              }
          });
      }
  }
  

  在组件中调用这个Action更新状态：

  statusStore.updateCharacterStatuses();
  

• 关于Store初始化
  你的Store初始化方式是正确的，但getter中的非法状态修改导致Pinia内部状态混乱，才出现Devtools无法识别的问题。修复Getter误用后，该问题会自动解决。

• 优化方案：用Getter派生状态（无需存储）
  如果status完全由failures和successess决定，没必要把它存在state里，直接用Getter实时计算更可靠：

  getters: {
      charactersWithStatus: (state) => {
          return state.characters.map(character => {
              let status;
              if (character.failures === 0 && character.successess === 0) {
                  status = "";
              } else if (character.failures === 3 && character.successess === 3) {
                  status = "Schrodinger's cat";
              } else if (character.failures === 3) {
                  status = "Dead";
              } else if (character.successess === 3) {
                  status = "Alive";
              } else {
                  status = "Risky";
              }
              return { ...character, status };
          });
      }
  }
  

  这样既不用手动维护status字段，也符合Getter的设计初衷，状态变更更可控。

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