championswimmer / vuex-module-decorators

TypeScript/ES7 Decorators to create Vuex modules declaratively
https://championswimmer.in/vuex-module-decorators/
MIT License
1.8k stars 170 forks source link

Documentation does not show how to access other properties available on getters #206

Open pattrickrice opened 4 years ago

pattrickrice commented 4 years ago

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
  }
}```
FullPint commented 4 years ago

Just import the other module and use getModule(“OtherModule”, store).

pattrickrice commented 4 years ago

If you aren't using dynamic store registration, where would that store reference come from?

FullPint commented 4 years ago

@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