How to migrate Vuex Method-Style Access to Pinia setup store

Question

Pinia. In Setup Stores: ref()s become state properties, computed()s become getters, function()s become actions.

Vuex. Method-Style Access. You can also pass arguments to getters by returning a function. This is particularly useful when you want to query an array in the store:

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}


store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

Not work

const getItemsByType = computed((element: string) => {
  return data.value[element] ? data.value[element] : []
})

That is like action but with return and also not help

  const getItemsByType = (element: string) => {
    return computed((element: string) => {
      return data.value[element] ? data.value[element] : []
    })
  }

That work, but that is an action and not getter(if consider that a getter is only with computed()) and is not cached

const getItemsByType = (element: string) => {
  return data.value[element] ? data.value[element] : []
}

Michal Šindelář · Accepted Answer · 2022-08-19 13:12:11Z

3

Computed cannot have an argument.

From Vuex docs:

Note that getters accessed via methods will run each time you call them, and the result is not cached.

So the Method-Style Access in Vuex is just a getter returning function. Equivalent in Pinia is to use plain function (last example)

const getItemsByType = (element: string) => {
  return data.value[element] ? data.value[element] : []
}

answered Aug 19, 2022 at 13:12

Michal Šindelář

38.7k8 gold badges83 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michael · Accepted Answer · 2022-08-20 07:31:40Z

0

Maintainer @posva answer https://github.com/vuejs/pinia/discussions/1569#discussioncomment-3429724

It's actually the same as Vuex

Options stores:

defineStore('store', {
  getters: {
    foo: state => (param) => state.bar + param
  }
})

Setup Stores:

const getItemsByType = computed(() => 
  (element: string) => data.value[element] ? data.value[element] : []
)

answered Aug 20, 2022 at 7:31

Michael

1,0891 gold badge11 silver badges28 bronze badges

1 Comment

Michal Šindelář Over a year ago

Second example is pointless - wrapping function into computed has no benefits. Also confirmed by posva

Collectives™ on Stack Overflow

How to migrate Vuex Method-Style Access to Pinia setup store

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related