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"),

Answer 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;

Answer 2

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.