Question

SO朋友你好，

我在引用Vue组件之一中的vuex存储模块时遇到问题。如果将代码从authentication.module.ts移到store.ts，我可以使State和Mutations工作，但是当尝试将模块用于更干净的代码时，似乎无法引用该模块。我收到错误消息：

在mapState（）中找不到

[vuex]模块命名空间：@ / _ Store / _Modules / authentication.module /

我已经向模块添加了namespace：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添加模块，这与向Vuex Store添加名称空间属性无关。模块。

第二个问题是我对Typescript和Vuex太陌生，无法理解调试错误的内容。

因此，如果您在此处尝试将模块添加到Vuex商店中，请参阅下文。

将模块添加到Vuex存储时，它必须包含一个状态，该状态必须为 Minimum （最低），因为这是Getter，Mutase和Actions将对该模块产生影响的位置。在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商店：

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声明是我的错误。

打字稿：引用Vuex存储模块会导致VueJs 2.5出现名称空间错误

Store.ts

1 个答案: