Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
stefaanv opened this issue Nov 6, 2021 · 0 comments
Open

Comments

@stefaanv
Copy link

stefaanv commented Nov 6, 2021

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant