CODEWITHSUNDEEP
vue.jsstateundefinedpiniavue-devtools
interwebjill
interwebjill

Reputation: 75

Vue3.js and Pinia: Why is my store state undefined in VueDevtools?

I am using Vue 3 with Pinia ^2.0.14. I'm importing Pinia into the app in main.ts like so:

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'

const pinia = createPinia()

const app = createApp(App).use(pinia).mount('#app')

I'm creating the store language.ts like so:

import { defineStore } from 'pinia'

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

and using it in LanguageDropdown.vue like so:

<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>

The code works as expected, but in the Vue devtools inspector languageStore.language, languageStore.languages, and language.state are undefined. Why would that be?

screen shot of Vue devtools inspector

Upvotes: 4

Views: 6787

Answers (2)

Kyrylo Brodnikov
Kyrylo Brodnikov

Reputation: 5

Maybe you need correct install pinia in your App

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')

I use this code and my Pinia work is good

my result in pinia store

Upvotes: -3

JaguarJack
JaguarJack

Reputation: 1

I found a away to solve it, though I think its not perfect

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

Upvotes: 0

Related Questions