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对象。因此，您收到的错误无法读取$store

的undefined

由于您要导入store中的app.js，因此您可以直接使用：

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;

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

2 个答案: