不同路由组件间Pinia State未同步问题求助

核心问题是Pinia Store未全局共享单例实例，导致不同路由组件获取到独立的Store实例，状态无法同步。结合你的代码和现象，按以下步骤排查修复：

1. 修正main.js中Pinia的初始化顺序 #

必须确保Pinia在Vue实例挂载前、路由注册前完成全局注册，否则路由组件会创建独立的Store实例：

// main.js 正确示例
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'

const app = createApp(App)
// 先创建并注册Pinia
const pinia = createPinia()
app.use(pinia)
// 再注册路由
app.use(router)
// 最后挂载应用
app.mount('#app')

2. 验证Store导入路径的一致性 #

确保所有组件导入Store时使用完全相同的路径，避免因路径差异导致重复导入：

• 统一使用@/store/QueueStore（如你代码中所示），不要混用相对路径（如../store/QueueStore）
• 检查项目别名配置（vite.config.js或vue.config.js），确保@正确指向src目录：

  // vite.config.js 别名配置示例
  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import path from 'path'
  
  export default defineConfig({
    plugins: [vue()],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src')
      }
    }
  })
  

3. 规范Store中数组的修改方式（可选） #

虽然push本身支持响应式，但使用新数组替换的方式更明确，也能避免潜在的响应式问题：

// QueueStore.js 中修改add action
actions: {
  add(item) {
    // 使用展开运算符创建新数组，触发响应式更新
    this.queue = [...this.queue, item]
  }
}

4. 验证Store实例唯一性 #

打开Vue Devtools的Pinia标签页，确认只有一个queue Store实例。如果存在多个实例，说明仍存在重复创建的问题，回到步骤1和2排查。

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