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

【问题标题】：Vue3.js and Pinia: Why is my store state undefined in VueDevtools?Vue3.js 和 Pinia：为什么我的商店状态在 VueDevtools 中未定义？
【发布时间】：2022-07-18 14:50:51
【问题描述】：

我正在使用 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。为什么会这样？

screen shot of Vue devtools inspector

【问题讨论】：

标签： vue.js state undefined pinia vue-devtools

【解决方案1】：

你喜欢它吗？我的朋友！

我找到了一个可以解决它的方法，但我认为它并不完美

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

还有什么办法可以解决吗？

【讨论】：