vuex-module-decorators
vuex-module-decorators copied to clipboard
Documentation does not show how to access other properties available on getters
Using the normal vuex notation, we are able to access state, getters, rootState, and rootGetters.
someGetter (state, getters, rootState, rootGetters) {
getters.someOtherGetter // -> 'foo/someOtherGetter'
rootGetters.someOtherGetter // -> 'someOtherGetter'
},
The documentation for getters on the README only shows accessing the state
class MyModule extends VuexModule {
wheels = 2
@Mutation
incrWheels(extra) {
this.wheels += extra
}
get axles() {
return this.wheels / 2
}
}```
Just import the other module and use getModule(“OtherModule”, store).
If you aren't using dynamic store registration, where would that store reference come from?
@pattrickrice
Internally we don't use the project anymore but from what I remember you do as follows
// index.ts or wherever you have declared your store
import Vuex from 'vuex';
import SomeModule from './store/SomeModule';
import SomeOtherModule from './store/SomeOtherModule';
const store = new Vuex.Store({
modules : {
someModule: SomeModule,
someOtherModule: SomeOtherModule
}
});
export default store;
// ./store/SomeModule where you have SomeModule class declared
import {VuexModule, Mutation} from 'vuex-module-decorators';
class SomeModule extends VuexModule {
wheels = 2;
@Mutation
incrWheels(extra: number) {
this.wheels += extra;
}
get axles() {
return this.wheels / 2;
}
}
export default SomeModule;
And then here is how you would 'gain access to SomeModule's getters from another state
// ./store/SomeOtherModule where you have SomeOtherModule class declared
import {VuexModule, Mutation, getModule} from 'vuex-module-decorators'
import store from '../index';
import SomeModule from './SomeModule';
class SomeOtherModule extends VuexModule {
wheels = 2
@Mutation
incrWheels(extra: number) {
const someModule = getModule(SomeModule, store) // Here you use the getModulle method. The first argument is the Class Declaration !== instance!!!! The second argument is the reference to the store that your application is using
this.wheels = extra + someModule.axles // here you can access the wheels getter
}
get axles() {
return this.wheels / 2
}
}
export default SomeOtherModule