CODEWITHSUNDEEP
vue.jsvuejs2vue-composition-api
tonsteri
tonsteri

Reputation: 855

Why are my Pinia store getters undefined?

I'm trying to use Pinia with vue 2 and composition api. I followed the docs to install pinia@next, used it with Vue.use(PiniaPlugin) and in the app used Vue({ ..., pinia: createPinia() })

When i create a store copy-pasting from docs

export const useStore = defineStore('main', {
  state: () => ({
    counter: 1,
  }),
  getters: {
    doubleCount: (state) => state.counter * 2,
  },
})

and in a component, do

<template>
  <p>Double count is {{ store.doubleCount }}</p>
  <p>Counter is {{ store.counter }}</p>
</template>

<script>
export default {
  setup() {
    const store = useStore()

    return { store }
  },
}
</script>

Why is my getter doubleCount always undefined (when inspecting from setup(), or trying to use in template? store.counter shows the correct value.

I'm new to both Vue and Pinia, so I must be doing something wrong here.

Upvotes: 2

Views: 5993

Answers (1)

tonsteri
tonsteri

Reputation: 855

Turns out the current @next -version (2.0.0-rc8) has broken getters in stores. https://github.com/posva/pinia/issues/660

Using @latest worked for me, required a subtle modification in store defineStore syntax (id prop instead of name as 1st argument)

Upvotes: 2

Related Questions