Typescript: ссылка на модуль хранилища Vuex приводит к ошибке пространства имен для VueJs 2.5

Question

Привет товарищ ТАК Друзья,

У меня возникают проблемы со ссылкой на модуль магазина Vuex в одном из моих компонентов Vue. Я могу заставить состояние и мутации работать, если переместить код из authentic.module.ts в store.ts, однако при попытке использовать модуль для более чистого кода, кажется, я не могу сделать ссылку на модуль, Я получаю ошибку:

Пространство имен модуля [vuex] не найдено в mapState(): @/_Store/_Modules/authentication.module/

Я добавил namespaced:true в модуль, так что я запутался, что еще мне не хватает?

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
Обновлено: добавлено пространство имен: "Аутентификация" - проблема все еще существует

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

Home.Vue (ошибка возникает при загрузке, поскольку предполагается, что свойство State должно отображаться)

        <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
* Обновлено: добавлен файл Main.ts для справки.

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

Так что я смог решить мою проблему. У меня действительно две проблемы с моим вопросом, во-первых, он задавал два вопроса, которые касались одной и той же вещи, но проблема, с которой я столкнулся, касалась добавления модуля в Vuex Store, который не имеет ничего общего с добавлением свойства пространства имен к модуль.

Вторая проблема заключается в том, что я был слишком новичком в Typescript и Vuex, чтобы понять, о чем сообщают ошибки отладки.

SO Если вы пытаетесь добавить модули в свой магазин Vuex, читайте ниже.

При добавлении модуля в хранилище Vuex он должен содержать как минимум минимальное состояние, поскольку именно здесь будут действовать геттеры, мутации и действия для этого модуля. В VuejS - Typescript для того, чтобы эти атрибуты были необходимы, ваш модуль должен импортировать и определить их. Я использую только State для этого модуля, но предоставил, как использовать и другие части Vuex.

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> = {
};

Теперь, когда ваш модуль определен, его просто нужно импортировать в 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,
  },
});

Теперь с определенным модулем, используя namespace:true, будет работать, так как он содержит его mapstate, так как мой OP заявил, что это была моя ошибка.