如何在Vue3插件中获取Pinia Store实例？

你无法直接从app对象中获取已创建的Pinia Store实例，但可以通过以下两种规范的方式在插件内部使用Pinia：

方法一：利用全局注入的Pinia实例 #

当你在main.js中先安装Pinia后，Vue应用的app.config.globalProperties会挂载$pinia对象，你可以在插件中通过它获取具体的Store：

// 导入你的Pinia Store
import { useTranslationStore } from './stores/translation'

export default {
    install: (app) => {
        // 确保Pinia已提前安装
        const pinia = app.config.globalProperties.$pinia
        if (!pinia) {
            throw new Error('请先安装Pinia再使用该翻译插件')
        }

        // 通过Pinia实例获取Store
        const translationStore = useTranslationStore(pinia)

        app.config.globalProperties.$translate = (translations, key) => {
            // 直接使用Store中的状态或方法
            const currentLang = translationStore.currentLang
            // 优先使用当前语言对应的翻译， fallback到默认值
            let result = translations[key] ? translations[key][currentLang] || translations[key][0] : ''
            // ...你的其他翻译逻辑
            return result
        }
    }
}

注意使用顺序：必须先安装Pinia，再安装你的翻译插件：

// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import translatePlugin from './plugins/translate'
import App from './App.vue'

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

// 先安装Pinia
app.use(pinia)
// 再安装翻译插件
app.use(translatePlugin)

app.mount('#app')

方法二：通过插件选项传入Pinia实例 #

这种方式更灵活，无需依赖安装顺序，让用户主动传入Pinia实例：

import { useTranslationStore } from './stores/translation'

export default {
    install: (app, options) => {
        const { pinia } = options
        if (!pinia) {
            throw new Error('请在插件选项中传入Pinia实例')
        }

        const translationStore = useTranslationStore(pinia)

        app.config.globalProperties.$translate = (translations, key) => {
            const currentLang = translationStore.currentLang
            let result = translations[key] ? translations[key][currentLang] || translations[key][0] : ''
            // ...你的其他翻译逻辑
            return result
        }
    }
}

使用方式：

// main.js
app.use(translatePlugin, { pinia })

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