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");

Answer 1

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.