Nuxtjs using Vuex-module-decorator doesn't wordk

Question

I want to use my vuex modules as classes to make my code more clean and readable. I used the section (Accessing modules with NuxtJS) at the bottom of this document: https://github.com/championswimmer/vuex-module-decorators/blob/master/README.md

I've searched for the solution for almost 3 days and tried out this link: vuex not loading module decorated with vuex-module-decorators but, it didn't work. Also, I used getModule directly in the component like the solution in this issue page: https://github.com/championswimmer/vuex-module-decorators/issues/80

import CounterModule from '../store/modules/test_module';
import { getModule } from 'vuex-module-decorators';
let counterModule: CounterModule;

Then

created() {
        counterModule = getModule(CounterModule, this.$store);
}

Then, accessing method elsewhere

computed: {
        counter() {
            return counterModule.getCount
        }
    }

it didn't work for me!

This is my Module in store folder in Nuxtjs project:

import { ICurrentUser } from '~/models/ICurrentUser'
import { Module, VuexModule, Mutation, MutationAction } from 'vuex-module-decorators'

@Module({ stateFactory: true, namespaced: true, name: 'CurrentUserStore' })
export default class CurrentUser extends VuexModule {
    user: ICurrentUser = {
        DisplayName: null,
        UserId: null,
    };

    @Mutation
    setUser(userInfo: ICurrentUser) {
        this.user = userInfo;
    }

    get userInfo() {
        return this.user;
    }
}

In index.ts file in sore folder:

import { Store } from 'vuex'
import { getModule } from 'vuex-module-decorators'
import CurrentUser from './currentUser'

let currentUserStore: CurrentUser

const initializer = (store: Store<any>): void => {
  debugger
  currentUserStore = getModule(CurrentUser, store)
}

export const plugins = [initializer]
export {
  currentUserStore,
}

I think the problem stems from this line:

currentUserStore = getModule(CurrentUser, store)

currentUserStore is created as object but properties and methods are not recognizable.

when I want to use getters or mutation I get error. For instance, "unknown mutation type" for using mutation

drone.ah drone.ah · Accepted Answer · 2020-04-03T10:15:42

Probably several months late but I struggled with a similar issue, and eventually found the solution in https://github.com/championswimmer/vuex-module-decorators/issues/179

It talks about multiple requirements (which are summarised elsewhere)

The one that relates to this issue is that the file name of the module has to match the name you specify in the @Module definition.

In your case, if you rename your file from currentUser to CurrentUserStore' or change the name of the module toCurrentUser`, it should fix the issue.

Nuxtjs using Vuex-module-decorator doesn't wordk

1 Answers