Modules | vuex rootgetters
Duetousingasinglestatetree,allstatesofourapplicationarecontainedinsideonebigobject.However,asourapplicationgrowsinscale,thestorecangetreallybloated.Tohelpwiththat,Vuexallowsustodivideourstoreintomodules.Eachmodulecancontainitsownstate,mutations,actions,getters,andevennestedmodules-itsfractalallthewaydown:constmoduleA={state:()=>({...}),mutations:{...},actions:{...},getters:{...}}constmoduleB={state:()=>({...}),mutations:{...},actions:{...}}conststore=createStore({modules:{a:moduleA,b:m...
Due to using a single state tree, all states of our application are contained inside one big object. However, as our application grows in scale, the store can get really bloated.
To help with that, Vuex allows us to divide our store into modules. Each module can contain its own state, mutations, actions, getters, and even nested modules - its fractal all the way down:
const moduleA = { state: () => ({ ... }), mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: () => ({ ... }), mutations: { ... }, actions: { ... } } const store = createStore({ modules: { a: moduleA, b: moduleB } }) store.state.a store.state.b Module Local StateInside a modules mutations and getters, the first argument received will be the modules local state.
const moduleA = { state: () => ({ count: 0 }), mutations: { increment (state) { state.count++ } }, getters: { doubleCount (state) { ...