typescript - 打字稿:引用 Vuex 存储模块会导致 VueJs 2.5 的命名空间错误
问题描述
你好,SO朋友们,
我在我的一个 Vue 组件中引用 Vuex 存储模块时遇到问题。如果我将代码从 authentication.module.ts 移动到 store.ts,我可以让 State 和 Mutations 正常工作,但是在尝试使用模块来获得更清晰的代码时,我似乎无法引用该模块. 我得到一个错误:
[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
更新:添加命名空间:'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 存储时,它必须至少包含一个状态,因为这是 Getter、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 商店:
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 将起作用,因为它包含它的地图状态,因为我的 OP 说是我的错误。
推荐阅读
- oracle - 从表单(11g)运行报告时出现错误:REP-0788:警告:受限 LOV 参数的值不在可选值中
- boto3 - 如何为父 ID 获取获取的 aws 组织的组织名称?
- c# - 从嵌套对象列表中获取属性值
- c++ - 第二次调用 recv() 返回正整数,但没有将任何内容读入缓冲区
- android - 更好的性能ffmpeg android
- javascript - 如何对存储在 Javascript 变量中的字典列表中的两个值求和?
- apache-spark - 通过在不同线程中执行多个查询来触发数据帧缓存
- spring - Hibernate @OneToMany 在第一次调用时返回 null
- javascript - 添加 require 关键字会破坏 vanilla JavaScript 函数
- algorithm - 中位数算法的中位数 - 选择哪个元素作为每组的中位数