(VueJS) Vuex getter should update based on another module state change

Question

I have two Vuex store modules: ListItems and ListSort. ListItems has a getter that is essentially computed from the state of both of these modules. See the below code:

// Import the ListSort store module
import listSort from './list-sort';

// ListItems getters
const getters = {
  companiesSorted: () => {
    return _.orderBy(state.companies,
      [listSort.state.sortAttribute],
      [listSort.state.sortDirection]);
  },
};

However, when the state in ListSort is changed (i.e. sortAttribute or sortDirection are changed), this is not causing the ListItems getter to recompute. How can I tell Vuex that, given a dependency to computing companiesStored has changed, Vuex should recompute that getter?

Thanks!

Eric Guan Eric Guan · Accepted Answer · 2017-07-06T03:53:08

How can I tell Vuex that, given a dependency to computing companiesStored has changed, Vuex should recompute that getter?

You don't, it's done automatically for you! Isn't Vue awesome for lazy developers?

The only JS module that should import a Vuex module is the JS module that initializes Vuex, thru new Vuex.Store, which bundles the Vuex modules together.

Vuex module getters have access to their local state, and the rootState. The rootState is where you access other module's data.

https://vuex.vuejs.org/en/modules.html#module-local-state

It should look something like this:

companiesSorted: (state, getters, rootState) => {
    return _.orderBy(state.companies,
      [rootState.listSortModule.sortAttribute],
      [rootState.listSortModule.sortDirection]);
  },

Where listSortModule is the name you gave to the module.

(VueJS) Vuex getter should update based on another module state change

1 Answers