Typescript: Referencing a Vuex Store Module gives namespace error for VueJs 2.5

Question

Hello fellow SO Friends,

I am having problems referencing a vuex store module in one of my Vue components. I am able to get the State and Mutations working if I move the code from the authentication.module.ts to the store.ts, however when trying to use a module for cleaner code, it seems I can not make a reference to the module. I Get an error:

[vuex] module namespace not found in mapState(): @/_Store/_Modules/authentication.module/

I Have added namespaced:true to the module so I am confused what else I am missing?

Store.ts

import Vue from "vue";
import Vuex from "vuex";
import Authentication from "@/_Store/_Modules/authentication.module"

Vue.use(Vuex);

export default new Vuex.Store({
modules:{
    Authentication
}
});

authentication.module.ts
Updated: Added namespace:'Authentication' - Problem still exist

export default {
    namespaced:true,
    namespace:'Authentication'
    state: {
      counter: 0
    },
    mutations:{
        incrementCounter(state: { counter: number; }) {
            state.counter++    }
    }
  }

Home.Vue (The Error is here when it loads since the State property is suppose to render)

        <h1>Hello and Welcome Home!</h1>
        <div>The Count of the store is: {{counter}}</div>
        <button type="button" v-on:click='increment'>Click to Increment</button>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { State, Getter, Action, Mutation, namespace } from "vuex-class";
const Authentication = namespace("@/_Store/_Modules/authentication.module"); // This is the problem line here it seems?

@Component
export default class Home extends Vue {
  @Authentication.State("counter") counter!: number;
  @Authentication.Mutation("incrementCounter") increment!: void;
}
</script>

Main.ts
*Updated: Added the Main.ts File for reference

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./_Store/store";
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'

Vue.config.productionTip = false;

new Vue({
    router,
    store,
    render: h => h(App),
}).$mount("#app");

You should probably give the module name, like: namespace('Authentication') — Giovane
I added namepsace:'Authentication' to authentication.module.ts and still receive the same error. Thanks for the input. Maybe my path is wrong? but I have tried changing the path a dozen times and cant seem to get it to work. — Scornwell
Not posting as an answer because I am not sure if it's true but, I believe you should nevertheless have state, mutations, getters and actions and export them in root store even if empty. Could you add export default new Vuex.Store({ state: { }, mutations: { }, actions: { }, getters: { }, modules: { Authentication } }) Also, try exporting export const Authentication instead of default. — Danijel
@Danijel thanks for your input. I added the empty properties to the store and still no joy. Now, If I were to add Counter to the State of the store directly, I can access the information. My problem is definitely when I try to seperate into modules. I keep referencing docs, but I don't see where I am going wrong since i could have sworn namespaced:true would have made vuejs and the typescrit compile the Mapppings. — Scornwell

Scornwell Scornwell · Accepted Answer · 2018-11-06T16:52:20

So I was able to solve my issue. There are really two problems with my question, firstly it was asking two questions that dealt with the same thing, but the problem I was facing dealt with adding a Module to a Vuex Store, which has nothing to do with adding a namespace property to the module.

The second problem is that I was too new to Typescript and Vuex to understand what the debug errors were stating.

SO In case you are here trying to add Modules to your Vuex Store read below.

When Adding a Module to a Vuex Store it Must contain a State at Minimum as this is where the Getters, Mutations and Actions Will affect for that module. In VuejS - Typescript in order to have these attributes needed your module needs to import and define them. I am utilizing only State for this module, but have provided how to use the other Vuex parts as well.

import { DemoState } from '@/Demotypes';
import { GetterTree, MutationTree, ActionTree } from 'Vuex';

export const state: DemoState = {
    Account: {
        Alerts: [
            {id: 1, Message: 'Account password is set to Expire soon. Please change it ASAP.'},
            {id: 2, Message: 'Another problem'},
            {id: 3, Message: 'Error Will Robinson'},
        ],
    },
export const getters: GetterTree<DemoState, any> = {
};

export const mutations: MutationTree<DemoState> = {
};

export const actions: ActionTree<DemoState, any> = {
};

Now since your module is defined, It simply needs to be imported into the Vuex Store:

import Vue from 'vue';
import Vuex from 'vuex';
import { Authentication } from '@/store/modules/authentication.module';
import { DemoData } from '@/store/modules/data.module';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
      Authentication,
      DemoData,
  },
});

Now with the module defined, using namespace:true will work as it contains its mapstate as my OP stated was my error.

Typescript: Referencing a Vuex Store Module gives namespace error for VueJs 2.5

Store.ts

1 Answers