CODEWITHSUNDEEP
javascriptvue.jsvuejs2vuex
sir_thursday
sir_thursday

Reputation: 5419

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

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!

Upvotes: 1

Views: 840

Answers (1)

Eric Guan
Eric Guan

Reputation: 15992

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.

Upvotes: 2

Related Questions