Actions -> Usage with the Options API -> with Setup() example on the pinia page doesn't work

[l0ggik]

Hi,

i have a problem with state outside of the pinia store. I can change the value of a variable inside the store but it is not updated outside of the store.
I tried it according to the pinia documentation so i thought i might have done something wrong.
In the end i copy and pasted the Actions -> Usage with the Options API -> with Setup() example from the pinia page.

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counterStore', {
  state: () => ({
    counter: 0
  }),
  actions: {
    increment() {
      this.counter++
    }
  }
})

import { useCounterStore } from '../stores/counterStore'

export default {
  setup() {
    const counterStore = useCounterStore()

    return { counterStore }
  },
  methods: {
    incrementAndPrint() {
      this.counterStore.increment()
      console.log('New Count:', this.counterStore.count)
    },
  },
}

In my vue component, count is undefined and does not get updated.

I use nuxt3.

Would be really helpful to understand why the example is not working.

[posva]

Don't mix setup and options API in components, it's not really supported.
In your case, use mapStores(): https://pinia.vuejs.org/cookbook/options-api.html#usage-without-setup

[l0ggik]

I use mapStores() to acess the Actions and this works all perfectly fine.
But i also want to acess the State but with mapStores() the State outside of the store is not updating.
I also tried mapState() in combination with mapStores() but this also does not work.

[posva]

if you are referring to the example above, your variable is named counter, not count

[l0ggik]

Yes thats the reason why the example does not work. Thank you.