Vue3.js和Pinia:为什么我的商店状态在VueDevtools中未定义?

Question

我使用Vue 3与Pinia ^2.0.14。我将Pinia导入main.ts中的应用程序，如下所示:

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'
const pinia = createPinia()
const app = createApp(App).use(pinia).mount('#app')

我像这样创建商店language.ts:

import { defineStore } from 'pinia'
export const useLanguageStore = defineStore({
id: 'language',
state: () => ({
language: 'English',
languages: ['English', 'Spanish'],
}),
})

并在LanguageDropdown.vue中使用，如下:

<script setup lang="ts">
import { useLanguageStore } from '@/store/language.ts'
const languageStore = useLanguageStore()
</script>
<template>
<select
v-model="languageStore.language">
<option
v-for="language in languageStore.languages"
:key="language"
:value="language"
>
{{ language }}
</option>
</select>
</template>

代码按预期工作，但在Vue devtools检查器languageStore.language,languageStore.languages和language.state是undefined。为什么会这样?

Vue devtools检查器截图

Answer 1

我找到了一个方法来解决它，尽管我认为它并不完美

// should use computed
const languages = computed(() => languageStore.languages )

Answer 2

也许你需要在你的应用程序中正确安装pinia

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')

我使用这个代码，我的Pinia工作很好

my result in pinia store