如何解决Vue3+Pinia中同时初始化两个Store状态的异常问题？

首先排查最可能的原因：Pinia Store ID重复 #

如果两个Store的定义中使用了相同的id，Pinia会将它们视为同一个Store实例，导致后执行的action覆盖前一个的状态。检查你的两个Store定义：

// settingsStore.js 示例
export const useSettingsStore = defineStore('settings', { // 这里的id是唯一的'settings'
  state: () => ({ ... }),
  actions: { getSettings() { ... } }
});

// serviceStore.js 示例
export const useServiceStore = defineStore('service', { // 这里的id必须唯一，不能和上面重复
  state: () => ({ ... }),
  actions: { getAllServices() { ... } }
});

如果id重复，直接修改为唯一id即可解决问题。

检查Store的状态更新逻辑 #

确保两个Store的action中，更新状态时都是通过this操作当前Store的state，而非修改外部共享对象：

• 错误示例（修改外部初始值）：

const initialSettings = { theme: 'light' };
export const useSettingsStore = defineStore('settings', {
  state: () => initialSettings,
  actions: {
    async getSettings() {
      const { data } = await supabase.from('settings').select('*').single();
      // 错误：直接修改外部对象，会导致状态异常
      Object.assign(initialSettings, data);
    }
  }
});

• 正确示例（操作当前Store的state）：

export const useSettingsStore = defineStore('settings', {
  state: () => ({ theme: 'light' }),
  actions: {
    async getSettings() {
      const { data } = await supabase.from('settings').select('*').single();
      // 正确：通过this更新当前Store的状态
      this.$state = { ...this.$state, ...data };
      // 或者逐个赋值：this.theme = data.theme;
    }
  }
});

排查是否存在跨Store的错误操作 #

检查getAllServices方法中，是否不小心调用了settingsStore.$reset()，或者直接修改了settingsStore的状态。比如：

// serviceStore.js 中的错误操作
actions: {
  async getAllServices() {
    const { data } = await supabase.from('services').select();
    this.services = data;
    // 错误：不小心重置了settingsStore
    const settingsStore = useSettingsStore();
    settingsStore.$reset();
  }
}

如果有这类代码，直接删除即可。

尝试异步请求的顺序控制 #

如果以上都没问题，试试将两个异步请求改为串行或用Promise.all包裹，排除并发请求导致的回调冲突：

onMounted(async () => {
  // 串行执行
  await settingsStore.getSettings();
  await serviceStore.getAllServices();
});

// 或者并行执行
onMounted(async () => {
  await Promise.all([
    settingsStore.getSettings(),
    serviceStore.getAllServices()
  ]);
});

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