Search code examples
javascriptvue.jsvuex

VueJS namespaced Vuex module getter returns incorrect value on page load

Under exactly same circumstances I get different outputs of the same getter.

console.log(store.getters);

Output in the console: {}: auth/loggedIn: true, which is the correct value I want to get, but look at this:

console.log(store.getters['auth/loggedIn']);

Output in the console: false

Why is that?

My auth.js module:

auth = {
    namespaced: true,
    state: {
        token: null
    },
    getters: {
        loggedIn(state) {
            return state.token !== null
        }, ...

My app.js:

window.Vue = require('vue');
import Vue from 'vue'
...
import routes from './routes'
import {store} from './store/store'
 ...
console.log(store.getters['auth/loggedIn']);
Solution

  • As @thanksd pointed out, logging objects in the console shows the values at the viewing time. The real value of the property was actually false. Changing the lifecycle of the application solved the issue.