Questions about the new setup syntax with effectScope()

[holtergram]

Hey,
now that Vue 3.2 is out and with it the new effectScope() being used in the "setup syntax" – is this now the recommended way to create stores in Pinia or is it just an alternative? Would love to hear your ideas on this @posva.

defineStore('id', () => {
  const apolloMeQuery = useQuery(ME_QUERY) // we are inside of an `effectScope()`

  function someAction() {
    const { result } = apolloMeQuery
  }

return { someAction }
})

The new syntax finally allows us to place business logic inside of the stores which previously had to go into setup() (which is e.g. awesome in combination with Vue-Apollo and the Composition-API). But I'm wondering: Does it make an impact on performance What are pros and cons of both options? i guess tthe new syntax kind of blurs the line between getters and actions as there is no clear differentiation. Are there more differences? Would love to hear other opinions as I'm thinking about rewriting all stores with the new syntax to take addvantage of mentioned possibillity if needed.

Thanks a ton for Pinia and all the hard work that went into this ❤️

[posva]

I'm glad you are enjoying Pinia!

No syntax is recommended over the other. The setup syntax makes it sometimes much easier to write stores, especially when using other composition functions.

The options api has slightly better devtools support because it's able to group state changes within actions.

Note you can call any composable inside of state() since it's ran inside an effectScope():

defineStore('route', {
  state() {
    const route = useRoute()
    // could even be return route
    return {
      path: useRoutePath()
    }
  }
})

[posva]

This has yet to be properly documented

[GoudekettingRM]

I'm trying to access the route in a setup store, but the route only returns as undefined. Can you tell me what I'm doing wrong?

export const useUserStore = defineStore('user', () => {
  const route = useRoute();
  console.log(route); // undefined
}

versions:

"pinia": "^2.0.28",
"vue": "^3.2.16",

[posva]

There is an example of exactly this in the docs 😄 Searching for router should bring the page

[StefanFlaschko]

There is an example of exactly this in the docs 😄 Searching for router should bring the page

Do you have a link to it? Can't find it in the docs :(

[ramsesmoreno]

At the moment the store is defined, you may not have an active route. I would recommend you use a computed value like

const route = computed( () => useRoute())

And then access it in your components like

{{ userStore.route?.name }}

(I think the example in the docs about the router is the opposite: Using the store in the router: https://pinia.vuejs.org/core-concepts/outside-component-usage.html)

[holtergram]

Note you can call any composable inside of state() since it's ran inside an effectScope():

Oh that's neat and new to me! Thanks for mentioning this.

The setup syntax makes it sometimes much easier to write stores, especially when using other composition functions.

Could you please elaborate on why it's much easier? Is there an example hidden in the repo maybe I can have a look at?

And since you make an example using the router: I'm wondering if it's possible (and makes sense from your point of view) to move navigation guards or some of it's logic into a store?

Thanks for your answers, helps a lot.

[posva]

Could you please elaborate on why it's much easier? Is there an example hidden in the repo maybe I can have a look at?

Your example is (use*). Using other stores is also easier than calling useOtherStore() inside other getters or actions See #625

And since you make an example using the router: I'm wondering if it's possible (and makes sense from your point of view) to move navigation guards or some of it's logic into a store?

No, I rather not do that.