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

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

0 голосов
/ 14 октября 2018

Привет, друзья, друзья!

У меня проблемы со ссылкой на модуль хранилища 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");

1 Ответ

0 голосов
/ 06 ноября 2018

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

Вторая проблема заключается в том, что я был слишком новичком в 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 указывал на мою ошибку.

...