Vue.js vuex state not working correctly

Question

I'm using Vuex in my project with vue.js 2.0. My app.js looks like this:

import VueRouter from 'vue-router';
import Login from './components/Login.vue';
import Home from './components/Home.vue';
import VModal from 'vue-js-modal';
import Vuex from 'vuex';
import store from './store';

window.Vue = require('vue');

Vue.use(VueRouter);
Vue.use(VModal);
Vue.use(Vuex);


window.Bus = new Vue();

const routes = [
    { path: '/', component: Login, name: 'login' },
    { path: '/home', component: Home, name: 'home', beforeEnter: requireAuth },
];

const router = new VueRouter({
    routes // short for `routes: routes`
});

const app = new Vue({
    router,
    store
}).$mount('#app');

function requireAuth() {
    return this.$store.state.isLoggedIn;
}

My store looks like this:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const LOGIN = "LOGIN";
const LOGIN_SUCCESS = "LOGIN_SUCCESS";
const LOGOUT = "LOGOUT";

const store = () => {
    return new Vuex.Store({
        state: {
            isLoggedIn: !!localStorage.getItem("token"),
            user: null
        },
        mutations: {
            [LOGIN] (state) {
                state.pending = true;
            },
            [LOGIN_SUCCESS] (state) {
                state.isLoggedIn = true;
                state.pending = false;
            },
            [LOGOUT](state) {
                state.isLoggedIn = false;
            }
        },

        actions: {
            login({state, commit, rootState}) {
                commit(LOGIN_SUCCESS);
            },

            setUser({state, commit, rootState}, user) {
                //todo
            }
        }
    });
}

export default store;

However when I try to access a value from the state in my requireAuth function:

return this.$store.state.isLoggedIn;

or


return this.store.state.isLoggedIn;

I get the error:

Cannot read property '$store' of undefined

What could be wrong here?

--EDIT--

When I console.log(store); I see:

store() {
    var _mutations;

    return new __WEBPACK_IMPORTED_MODULE_1_vuex__["a" /* default */].Store({
        state: {
            isLoggedIn: !!localStorage.getItem("token"),

Can you console.log just imported store in your middleware function, what's the result ? — Ekushisu
– Ekushisu, Commented Mar 21, 2018 at 10:45

Vamsi Krishna · Accepted Answer · 2018-03-21 11:31:56Z

1

You have the function declared in the global scope like this:

function requireAuth() { 
    return this.$store.state.isLoggedIn; 
}

So when you call this function this is bound by default to global object. But since ES6 this will be undefined instead of the global object. So you get the error cannot read $store of undefined

Since you are importing the store in app.js you can directly use:

function requireAuth() { 
    return store.state.isLoggedIn; 
}

EDIT

export the created store instance itself, not a function that returns a store instance as follows:

store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const LOGIN = "LOGIN";
const LOGIN_SUCCESS = "LOGIN_SUCCESS";
const LOGOUT = "LOGOUT";

const store = new Vuex.Store({
        state: {
            isLoggedIn: !!localStorage.getItem("token"),
            user: null
        },
        mutations: {
            [LOGIN] (state) {
                state.pending = true;
            },
            [LOGIN_SUCCESS] (state) {
                state.isLoggedIn = true;
                state.pending = false;
            },
            [LOGOUT](state) {
                state.isLoggedIn = false;
            }
        },

        actions: {
            login({state, commit, rootState}) {
                commit(LOGIN_SUCCESS);
            },

            setUser({state, commit, rootState}, user) {
                //todo
            }
        }
    });


export default store;

edited Mar 21, 2018 at 11:31

answered Mar 21, 2018 at 11:00

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jenssen Over a year ago

Thanks for helping. When I do that I still get: Cannot read property 'isLoggedIn' of undefined when I console.log(store);I see: (please see edit in my question)

Bert · Accepted Answer · 2018-03-21 10:57:50Z

1

The requireAuth function should be:

function requireAuth() {
    return store.state.isLoggedIn;
}

requireAuth is just a function defined in your app.js and this.$store is how you would refer to the store inside a Vue method. Instead, you can just refer to it in the function as store.

answered Mar 21, 2018 at 10:57

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Collectives™ on Stack Overflow

Vue.js vuex state not working correctly

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related