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

【问题标题】：Vue.js vuex state not working correctlyVue.js vuex 状态无法正常工作
【发布时间】：2018-03-21 10:39:44
【问题描述】：

我在我的项目中使用 Vuex 和 vue.js 2.0。我的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"),

【问题讨论】：

你的console.log可以在你的中间件函数中刚刚导入store，结果如何？

标签： javascript vue.js vuejs2 vuex

【解决方案1】：

你的函数在全局范围内声明如下：

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

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

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

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

编辑

导出创建的store实例本身，而不是返回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;

【讨论】：

感谢您的帮助。当我这样做时，我仍然得到：Cannot read property 'isLoggedIn' of undefined 当我 console.log(store);我看到：（请参阅我的问题中的编辑）

【解决方案2】：

requireAuth 函数应该是：

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

requireAuth 只是在您的app.js 中定义的一个函数，this.$store 是您在 Vue 方法中引用存储的方式。相反，您可以在函数中将其称为store。

【讨论】：