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

How can I split up an module-class #375

Closed Levy-from-Odessa closed 3 years ago

Levy-from-Odessa commented 3 years ago

I wrote some code on my nuxt config, but when I start to use it I got

_store__WEBPACK_IMPORTED_MODULE_10__.testStore.fetchData is not a

I check it by fetching whole the module in component and I received only 2 fields

testStore: Object { store: {…}, … } ​​ someField: ​​ someField2: ​​ store: Object { _committing: false, _actions: {…}, _actionSubscribers: (1) […], … }

That is very important, because I have huge modules

Thank You


import { Action, Module, Mutation, VuexModule } from 'vuex-module-decorators'

export interface ITest{
   someField: string;
   someField2: string;
}

@Module({
  namespaced: true,
  name: 'test',
  stateFactory: true,
})
class init extends VuexModule implements ITest {
   someField:string = '123'
   someField2:string = '123321'

}

export default class Test extends init{
  get getSomedata(){
    return this.someField + 'hello world'
  }

  @Mutation
  addData(s: string) {
    this.someField = s
  }

  @Action({ rawError: true })
  fetchData(s: string) {
    this.context.commit('addData', s)
  }
}
Levy-from-Odessa commented 3 years ago

Simple but not clear (for me as a newbie in ts) Just need do add every time decorator - @Module and if to use in separate files to export exactly class - export class ClassName .... {...}

import { Action, Module, Mutation, VuexModule } from 'vuex-module-decorators'

  export interface ITest{
     someField: string;
     someField2: string;
  }

  @Module({
    namespaced: true,
    stateFactory: true,
  })
  class init extends VuexModule implements ITest {
     someField:string = '123'
     someField2:string = '123321'
  }

  @Module({
    namespaced: true,
    name: 'test',
    stateFactory: true,
  })
  export default class Test extends init{
    get getSomedata(){
      return this.someField + 'hello world'
    }

    @Mutation
    addData(s: string) {
      this.someField = s
    }

    @Action({ rawError: true })
    fetchData(s: string) {
      console.log(s);

      this.context.commit('addData', s)
    }
  }