Vuex - When to use getters and when to use state

Question

I have a hard time figuring out when to use a getter or a state for best performance.

I will list some scenarios that you are welcome to comment on:

Scenario 1 - Getters VS state in actions and getters

In an action or getter, if you use a list of products multiple times to find a result would you then use getters.products or state.products?

Also, if you needed to use the products 10 times in the same function, would you call getters.products or state.products 10 times or would you assign the products to a variable at the beginning and then use that 10 times? Are there any perfomance gain in any over the others?

Scenario 2 - Getters returning a function

In the Vuex documentation it states that returning a function in a getter will not cache the result of that function. So having a getter for sorting a list of 1000 products would be bad, right? Like:

const getters = {
  sortedProducts: state => {
    return state.products.sort(a, b => {
      ...
    })
  }
}

So when ever a product is updated, which may or may not alter the sorting, then it would do the entire calculation once again, or?

Would it be better to have a state instead that is manually updated by an action and mutation?

Generally, would it ever make sense to have getters returning functions that has to do with large amount of data?

Answer 1

Vuex getters is to Vue computed as Vuex state is to Vue data.

Scenario 1

In an action or getter, if you use a list of products multiple times to find a result would you then use getters.products or state.products?

I don't quite understand your scenario here; a code example would better illustrate what you mean.

Say you have products state which is an array of product objects. If you need access to sorted (for example) products in more than one place, then making a sortedProducts getter would be better than sorting the products each time because Vue will cache the result and only recompute its value when the products array changes.

Also, if you needed to use the products 10 times in the same function, would you call getters.products or state.products 10 times or would you assign the products to a variable at the beginning and then use that 10 times? Are there any perfomance gain in any over the others?

No need to assign it to a variable at the beginning of the function if you're concerned about performance. The performance cost of accessing the store state or getters is negligible. Code readability is more important here.

Scenario 2

The sortedProducts getter function does not return a function, so Vuex will cache the result.

Would it be better to have a state instead that is manually updated by an action and mutation?

If you're talking about your sortedProducts getter, no.

Generally, would it ever make sense to have getters returning functions that has to do with large amount of data?

The only situation that you would need a getter to return a function is if you want the getter to be able to accept parameters, in which case the getter is more like a Vue component method instead of a Vue component computed property.

If you have a getter that returns a function and deals with a large amount of data, then Vuex can't help you out to cache the result of that function call. You'll have to figure out a way to minimize the number of times it is called, or incorporate memoization, etc.