Vue.js vuex 状态无法正常工作

Question

我在 vue.js 2.0 的项目中使用 Vuex。我的 app.js 看起来像这样：

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

我的 store 看起来像这样：

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;

然而，当我尝试从我的 requireAuth 函数中的状态访问一个值时：

return this.$store.state.isLoggedIn;

or


return this.store.state.isLoggedIn;

我收到错误：

Cannot read property '$store' of undefined

这里可能有什么问题？

--编辑--

当我 console.log(store); 我看到：

store() {
    var _mutations;

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

Answer 1

requireAuth函数应该是：

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

requireAuth 只是在您的 app.js 中定义的函数，而 this.$store 是您在 Vue 方法中引用商店的方式 .相反，您可以在函数中将其引用为 store.

Answer 2

您在全局范围内声明了这样的函数：

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

所以当你调用这个函数时 this 默认绑定到 global 对象。但是由于 ES6 this 将是 undefined 而不是 global 对象。所以你得到错误 cannot read $store of undefined

由于您在 app.js 中导入 store 您可以直接使用：

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

编辑

导出创建的 store 实例本身，而不是 returns 一个 store 实例的函数，如下所示：

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;

Vue.js vuex 状态无法正常工作

Vue.js vuex state not working correctly

javascript

vue.js

vuejs2

vuex