Only works when getModule() from vuex-module-decorators is in the code

Question

Only works when getModule() from vuex-module-decorators is in the code

stefaanv opened this issue 3 years ago · 0 comments

The below code works fine, but when I remove the two getModule calls (which aren't supposed to be there according to the examples), I get the underneath error message.

I'm using Vue 3.

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import { getModule } from 'vuex-module-decorators'
import { namespace } from 'vuex-class'
import Counter from '@/store/module/Counter'
import PositiveCounter from '@/store/module/PositiveCounter'

const counterStore = namespace('Counter')
const posCounterStore = namespace('PositiveCounter')

@Component({})
export default class CounterComp extends Vue {
  // These two lines shouldn't be there according to the documentation
  counterModule = getModule(Counter, this.$store)
  posCounterModule = getModule(PositiveCounter, this.$store)

  @counterStore.Getter('formatted') counterValue!: number
  @counterStore.Action('decrement') decrementCounter!: () => void
  @counterStore.Action('increment') incrementCounter!: () => void

  @posCounterStore.Getter('formatted') posCounterValue!: number
  @posCounterStore.Action('decrement') decrementPosCounter!: () => void
  @posCounterStore.Action('increment') incrementPosCounter!: () => void
}
</script>

Error message when removing the `getModule()` calls

[Vue warn]: Error in v-on handler (Promise/async): "Error: ERR_ACTION_ACCESS_UNDEFINED: Are you trying to access this.someMutation() or this.someGetter inside an @Action? 
That works only in dynamic modules. 
If not dynamic use this.context.commit("mutationName", payload) and this.context.getters["getterName"]
Error: Could not perform action increment
    at Store.eval (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:639:334)
    at step (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:297:19)
    at Object.eval [as next] (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:227:14)
    at eval (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:199:67)
    at new Promise (<anonymous>)
    at __awaiter (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:178:10)
    at Store.action (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:590:14)
    at Array.wrappedActionHandler (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:860:23)
    at Store.dispatch (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:525:15)
    at Store.boundDispatch [as dispatch] (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:415:21)
Error: ERR_STORE_NOT_PROVIDED: To use getModule(), either the module
            should be decorated with store in decorator, i.e. @Module({store: store}) or
            store should be passed when calling getModule(), i.e. getModule(MyModule, this.$store)
    at value (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:518:19)
    at getModule (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:122:21)
    at Store.eval (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:602:100)
    at step (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:297:19)
    at Object.eval [as next] (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:227:14)
    at eval (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:199:67)
    at new Promise (<anonymous>)
    at __awaiter (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:178:10)
    at Store.action (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:590:14)
    at Array.wrappedActionHandler (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:860:23)"

found in

---> <CounterComp> at src/components/Counter.vue
       <App> at src/App.vue
         <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1893
globalHandleError @ vue.runtime.esm.js?2b0e:1888
handleError @ vue.runtime.esm.js?2b0e:1848
eval @ vue.runtime.esm.js?2b0e:1865
Promise.catch (async)
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1865
invoker @ vue.runtime.esm.js?2b0e:2188
original._wrapper @ vue.runtime.esm.js?2b0e:6961
vue.runtime.esm.js?2b0e:1897 Error: ERR_ACTION_ACCESS_UNDEFINED: Are you trying to access this.someMutation() or this.someGetter inside an @Action? 
That works only in dynamic modules. 
If not dynamic use this.context.commit("mutationName", payload) and this.context.getters["getterName"]
Error: Could not perform action increment
    at Store.eval (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:639:334)
    at step (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:297:19)
    at Object.eval [as next] (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:227:14)
    at eval (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:199:67)
    at new Promise (<anonymous>)
    at __awaiter (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:178:10)
    at Store.action (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:590:14)
    at Array.wrappedActionHandler (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:860:23)
    at Store.dispatch (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:525:15)
    at Store.boundDispatch [as dispatch] (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:415:21)
Error: ERR_STORE_NOT_PROVIDED: To use getModule(), either the module
            should be decorated with store in decorator, i.e. @Module({store: store}) or
            store should be passed when calling getModule(), i.e. getModule(MyModule, this.$store)
    at value (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:518:19)
    at getModule (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:122:21)
    at Store.eval (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:602:100)
    at step (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:297:19)
    at Object.eval [as next] (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:227:14)
    at eval (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:199:67)
    at new Promise (<anonymous>)
    at __awaiter (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:178:10)
    at Store.action (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:590:14)
    at Array.wrappedActionHandler (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:860:23)
    at Store.eval (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:639:38)
    at step (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:297:19)
    at Object.eval [as next] (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:227:14)
    at eval (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:199:67)
    at new Promise (<anonymous>)
    at __awaiter (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:178:10)
    at Store.action (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:590:14)
    at Array.wrappedActionHandler (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:860:23)
    at Store.dispatch (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:525:15)
    at Store.boundDispatch [as dispatch] (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:415:21)

Counter.ts

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

@Module({ namespaced: true, name: 'Counter' })
class Counter extends VuexModule {
  value = 10

  @Action({ commit: 'mutUpdateCounter' })
  increment() {
    return 1
  }

  @Action({ commit: 'mutUpdateCounter' })
  decrement() {
    return -1
  }

  @Mutation
  mutUpdateCounter(increase: number) {
    this.value += increase
  }

  get formatted() {
    return `counter = ${this.value}`
  }
}
export default Counter

index.ts

import Vue from 'vue'
import Vuex from 'vuex'
import Counter from './module/Counter'
import PositiveCounter from './module/PositiveCounter'

Vue.use(Vuex)
const store = new Vuex.Store({
  modules: { Counter, PositiveCounter },
})
// store.registerModule('Counter', CounterStore)
export default store