[英]Vue.js vuex state not working correctly
I'm using Vuex in my project with vue.js 2.0. 我在vue.js 2.0项目中使用Vuex。 My
app.js
looks like this: 我的
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;
}
My store
looks like this: 我的
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;
However when I try to access a value from the state in my requireAuth function: 但是,当我尝试从我的requireAuth函数中的状态访问值时:
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);
当我
console.log(store);
I see: 我懂了:
store() {
var _mutations;
return new __WEBPACK_IMPORTED_MODULE_1_vuex__["a" /* default */].Store({
state: {
isLoggedIn: !!localStorage.getItem("token"),
The requireAuth
function should be: requireAuth
函数应为:
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 . requireAuth
只是在app.js
定义的函数,而this.$store
是在Vue方法中引用存储的方式 。 Instead, you can just refer to it in the function as store
. 相反,您只能在函数中将其称为
store
。
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. 所以,当你调用这个函数
this
是在默认情况下约束global
对象。 But since ES6 this
will be undefined
instead of the global
object. 但是从ES6开始,
this
将是undefined
而不是global
对象。 So you get the error cannot read $store
of undefined
所以你得到的错误是无法读取
undefined
$store
Since you are importing the store
in app.js
you can directly use: 由于您要在
app.js
中导入store
,因此可以直接使用:
function requireAuth() {
return store.state.isLoggedIn;
}
EDIT 编辑
export the created store
instance itself, not a function that returns a store
instance as follows: 导出自己创建的
store
实例本身,而不是返回store
实例的函数,如下所示:
store.js 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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.