0

Working with Vue cli 3 and vuex for the first time and trying to get a simple login working with vuex but the getters I have setup are not getting any data from the vuex store and just return nothing even with a state change.

Here's my 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');
        },
    },
});

and the navbar.vue where im trying to change the nav based on if a user is logged in.

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>

typescript

  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();
      }
  }
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Andrew Dean
  • 195
  • 1
  • 7
  • 23
  • I haven't really looked at your code, but it isn't necessary to set up a getter if it returns exactly the same value as something in your state. You can access the state directly from your components through $store.state or mapState(). No need for getters if you are not calculating anything globally. – Imre_G Oct 15 '18 at 09:13
  • using $store.state does work but when trying to use mapState(['loggedIn']) i still get nothing when trying to use {{ loggedIn }} do you know why this could be ? – Andrew Dean Oct 15 '18 at 11:22
  • No, I think it should work like this. Two caveats: 1) I have never used ts, so could easily be something there. 2) I hardly ever use `mapState` or `mapGetters`. I like having the explicit notion that something comes from vuex throughout my code. Also `$store.state` isn't that long to type. – Imre_G Oct 15 '18 at 11:32
  • For my typescript-vue projects I use https://github.com/ktsn/vuex-class to do the mapping to my vuex state/s. It make it much easier for me. – Jeremy Walters Oct 15 '18 at 12:03
  • @Imre_G always using getters to return state is also design preference. If you change the state you don't have to update every component using the state, just the getters that reference them. This specific store instance is unlikely to change but it can be a real life saver. – Austio Oct 15 '18 at 12:46

0 Answers0