typescript :引用 Vuex 商店模块为 VueJs 2.5 提供命名空间错误

标签 typescript vuejs2 vue-component vuex vuex-modules

你好 friend 们,

我在我的一个 Vue 组件中引用 vuex 存储模块时遇到问题。如果我将代码从 authentication.module.ts 移动到 store.ts,我能够使状态和突变工作,但是当尝试使用模块来获得更清晰的代码时,我似乎无法引用该模块. 我得到一个错误:

[vuex] 在 mapState() 中找不到模块命名空间:@/_Store/_Modules/authentication.module/


我已将 namespaced:true 添加到模块中,所以我很困惑还缺少什么?

商店.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
已更新:添加命名空间:'Authentication' - 问题仍然存在

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

最佳答案

所以我能够解决我的问题。我的问题确实有两个问题,首先它问了两个处理同一件事的问题,但我面临的问题是将模块添加到 Vuex 存储,这与将命名空间属性添加到模块。

第二个问题是我对 Typescript 和 Vuex 太陌生了,无法理解调试错误的含义。

所以,如果您在这里尝试将模块添加到您的 Vuex 商店,请阅读下文。

将模块添加到 Vuex 存储时,它必须包含 Minimum 状态,因为这是 Getters、Mutations 和 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 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 所述是我的错误。

关于 typescript :引用 Vuex 商店模块为 VueJs 2.5 提供命名空间错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52798775/

相关文章:

typescript - 将数据传递给根 Vue 类组件

javascript - [Vue 警告] : Invalid prop: type check failed for prop "X". 预期,得到字符串

javascript - 为什么共享模块导入不会失败?

vue.js - VUE和Axios API : Passing error code from api,来存储,到vue组件

javascript - 如何重用方法: define in main object and call from all component in VueJS

vue.js - 在 Vue.js 的 eslint 中删除 'component has been registered but not used'

vue.js - 在 q 表列中显示从字段而不是字段本身派生的值

typescript - Aurelia/Typescript - 如何通过选择标签将对象绑定(bind)到变​​量

html - 如何让页面滚动到较长文本中的特定单词

javascript - React 中的条件渲染不起作用,状态不能正常工作?