Vue-Pinia在组件外部（test.js）使用Store的问题及实例重复困扰

1. 修改main.js，导出已创建的Pinia实例 #

在main.js中导出初始化好的pinia实例，让其他文件直接复用这个与Vue应用绑定的实例：

import { createApp, watch } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.use(router)

// 页面刷新时恢复store
if (localStorage.getItem('state')) {
    pinia.state.value = JSON.parse(localStorage.getItem('state'))
}

watch(() => pinia.state, (state) => {
    localStorage.setItem('state', JSON.stringify(state.value))
}, { deep: true })

app.mount('#app')

// 同时导出app和pinia实例
export { app, pinia }

2. 删除多余的Pinia实例文件 #

删掉你创建的stores/create_pinia.js，不需要重复创建独立的Pinia实例。

3. 在test.js中复用main.js的Pinia实例 #

修改test.js代码，导入main.js中的pinia来初始化Store：

import { pinia } from './main.js'
import { useMainStore } from './stores/mainStore.js'

// 使用与Vue应用绑定的同一个Pinia实例创建Store
const store = useMainStore(pinia)

// 此时操作store的数据会与Vue组件中的store完全同步
console.log(store.foo) // 和组件内的store.foo值一致
store.setFoo({ content: 'LOREM' }) // 组件内的store.foo也会同步更新

问题根源说明 #

之前的方法会创建两个完全独立的Pinia实例：一个绑定到Vue应用，一个仅在test.js中使用。Pinia的Store是与Pinia实例绑定的，不同实例对应的Store是独立副本，自然数据无法共享。复用main.js中的Pinia实例，就能保证所有场景下使用的是同一个Store实例，数据保持同步。

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