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

Question

我正在使用 Vue 3 和 Pinia ^2.0.14。我正在

main.ts

中将 Pinia 导入应用程序，如下所示：

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

。为什么会这样？

Answer 1

我找到了一个解决它的方法，虽然我认为它并不完美

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

Answer 2

也许您需要在您的 App 中正确安装 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 工作很好