Состояние Vuex и получатели не получают данные магазина в Vue cli 3 - PullRequest
Новая
       40

Состояние Vuex и получатели не получают данные магазина в Vue cli 3

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

Работа с Vue cli 3 и vuex в первый раз и попытка получить простой вход в систему, работая с vuex, но настроенные мной геттеры не получают никаких данных из хранилища vuex и просто ничего не возвращают даже при изменении состояния.

Вот мои store.ts: 

export default new Vuex.Store({
    state: {
        loggedIn: true,
        email: 'test',
        password: 'test',
    },
    getters: {
        loggedIn(state) {
            return state.loggedIn;
        },
        userEmail(state) {
            return state.email;
        },
    },
    mutations: {
        login(state, user) {
            state.loggedIn = true;
            state.email = user.e;
            state.password = user.p;
        },
        logout(state) {
            state.loggedIn = false;
        },
    },
    actions: {
        login(context, data) {
            context.commit('login', data);
        },
        logout(context) {
            context.commit('logout');
        },
    },
});

и navbar.vue, где я пытаюсь изменить навигацию в зависимости от того, вошел ли пользователь в систему.

html 

<template>
    <nav id="nav" class="navbar fixed-top navbar-expand-md navbar-light bg-light">
        <router-link to="/" class="navbar-brand">Navbar</router-link>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#topNav" aria-controls="topNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="topNav">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <router-link to="/" class="nav-link">Home</router-link>
                </li>
                <li class="nav-item" v-if="loggedIn">
                    <router-link to="/Dashboard" class="nav-link">Dashboard</router-link>
                </li>
                <li class="nav-item" v-else>
                    <router-link to="/Login" class="nav-link">Login</router-link>
                </li>
                <li class="nav-item">
                    <p class="nav-link">user : {{ test }}</p>
                </li>

            </ul>
        </div>
    </nav>
</template>

машинопись 

  import { Component, Vue } from 'vue-property-decorator';
  import { mapState, mapGetters } from 'vuex';

  @Component({
      computed: mapState(['loggedIn']),
  })

  @Component
  export default class NavBar extends Vue {

      private test: string = 'test';

      constructor() {
          super();
      }
  }
...