Setup store - A more comprehensive example

[jenstornell]

I think that the setup way of building a store will be the future. I would love to shift towards that in the docs.

Currently in the docs

https://pinia.vuejs.org/introduction.html#basic-example

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() {
    count.value++
  }

  return { count, increment }
})

Comprehensive example

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useStoreCounter = defineStore('counter', () => {
  // STATES
  const count = ref(0)

  // GETTERS
  const isEven = computed(() => {
    return count.value % 2 === 0
  })

  const messageIfEven = computed(() => {
    return (message) => {
      if (!isEven.value) return
      return message
    }
  })

  // ACTIONS
  function increment() {
    count.value++
  }

  return { count, isEven, messageIfEven, increment }
})

Notes

• I think not everyone will remember the syntax for the imports so I added them.
• I also added comments to make it really clear what is states, getters and actions.
• isEven is a getter without arguments which works similar to a value.
• messageIfEven(message) which works more like a method. It takes an argument and also uses the other getter isEven.
• In the future we can get rid of .value after values and computed properties by using $ref(), but now we still has to deal with ref().

I hope this can help someone.

[posva]

Thanks for the code sample! I added it to the docs roadmap

[jaybo]

Is there any way to avoid re-enumerating all of the states, getters, and actions in the return, (or at least automate the entries)?

return { count, isEven, messageIfEven, increment }

[dmolesUC]

@jenstornell Is this transparent to store clients? I.e. does the code below still work just as if the store was defined statically with option syntax?

const store = useStoreCounter()
const { count, isEven, messageIfEven } = storeToRefs(store)
const { increment } = store

[franck102]

It took quite a bit of googling before finding this, so definitely thumbs up.
I also believe the doc should clearly explain the relationship with the other style of store setup, namely out of

return { count, isEven, messageIfEven, increment }

how does Pinia decide what goes in "state", what goes in "getters", and what goes in "actions".

[Thy3634]

is it possable define a async store ?

export const useCounterStore = defineStore('counter', async () => {
  const count = ref(0)
  function increment() {
    count.value++
  }

  return { count, increment }
})

const counterStore = await useCounterStore()

[posva]

not possible.

[dmoles]

@Thy3634 What are you trying to accomplish? You can certainly put async functions inside the store, if that helps.

[sisou]

It does not raise a type error. It tells you the useStore() method now returns a promise, and then state on it is no longer unwrapped. But it also doesn't work at runtime 🤷

Either the types must be fixed somehow to disallow async setup, or a mention should be put in the docs that it's not supported.

As for what I want to accomplish? I want to run an async API call to initialize the store with a value, instead of undefined and having to call the API afterwards.