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 Inspector languagestore.language，languagestore.languages.languages和language.State < /代码>是未定义的。为什么会这？

vue devtools Inspector的屏幕截图

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工作很好

我在pinia商店的结果