Tengo un módulo de autenticación de la siguiente manera:
import { VuexModule, Module, Mutation, Action } from "vuex-module-decorators"; import { LoginDTO, UserInterface } from "./type/auth"; @Module({ namespaced: true, name: "auth", }) export default class Auth extends VuexModule { public token = ""; private user: UserInterface | null = null; @Action public login(credentials: LoginDTO): void { console.log(credentials); } } signin.vue <template> <div> <h1>signin</h1> <form @submit.prevent="submit"> <input type="text" v-model="username" placeholder="username" /> <input type="text" v-model="password" placeholder="password" /> <input type="submit" value="submit" /> </form> </div> </template> <script lang="ts"> import { Component, Vue } from "vue-property-decorator"; import { namespace } from "vuex-class"; import { LoginDTO } from "@/store/module/type/auth"; const auth = namespace("auth"); @Component export default class Signin extends Vue { private username = ""; private password = ""; private credentials: LoginDTO = { username: this.username, password: this.password, }; private submit(): void { this.login(this.credentials); } @auth.Action public login: (credentials: LoginDTO) => void; } </script>Ahora, cuando llamo a la acción de inicio de sesión desde el componente, al enviar el formulario, arroja errores en la consola como "¿Está tratando de acceder a this.someMutation() o this.someGetter dentro de una @Action?"
index.js?6fc5:281 Uncaught (in promise) 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"]