访问商店或吸气剂的状态? _WEBPACK_IMPORTED_MODULE_3__store___.a.dispatch 不是函数
Access the state of store or getters? _WEBPACK_IMPORTED_MODULE_3__store___.a.dispatch is not a function
我正在尝试验证用户是否经过身份验证,以便能够访问定向的路由,否则重定向到登录路由,问题是我不知道如何执行 fetchUser
来自我的 beforeEach
的动作。换句话说,我无法从路由器 脚本访问我的 getter。
store.js
import mutations from './mutations';
import actions from './actions';
import getters from './getters';
export default {
state: {
isLoggedIn: !!localStorage.getItem("token"),
user_data : localStorage.getItem("user_data"),
},
getters ,
mutations,
actions
}
routes/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import routes from './rutas';
import store from '../store/';
const router = new VueRouter({
mode : 'history',
routes
})
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!store.getters.isLoggedIn) {
next({path: '/login'})
}
else {
store.dispatch('fetchUser') // Line error
next()
}
}
else {
next() // make sure to always call next()!
}
})
getters.js
export default {
isLoggedIn: state => {
return state.isLoggedIn
},
user_name : state =>{
if(! _.isEmpty(this.user_data))
return JSON.parse(state.user_data).name
return '';
},
isEmptyUser : state =>{
return _.isEmpty(this.user_data);
},
isAdmin: state => {
if(! _.isEmpty(this.user_data)) return state.user_data.nivel===1
return false;
}
}
actions.js
export default {
/* more methods*/
, async fetchUser({ commit }) {
return await axios.post('/api/auth/me')
.then(res => {
setTimeout(() => {
localStorage.setItem("user_data", JSON.stringify(res.data));
Promise.resolve(res.data);
}, 1000);
},
error => {
Promise.reject(error);
});
}
控制台中的这个 returns 错误:
_WEBPACK_IMPORTED_MODULE_3__store___.a.dispatch is not a function
我该怎么办或方法不对,我不应该直接访问操作?
问题是您的 store
不是实际的存储对象,它只是用于生成它的对象。
一个解决方案是让文件导出真实存储:
import Vue from 'vue';
import Vuex from 'vuex';
import mutations from './mutations';
import actions from './actions';
import getters from './getters';
Vue.use(Vuex); // added here
export default new Vuex.Store({ // changed here
state: {
isLoggedIn: !!localStorage.getItem("token"),
user_data : localStorage.getItem("user_data"),
},
getters ,
mutations,
actions
}) // changed here
现在您的路由器代码可以工作了。
您还必须注意的是,在某个地方,可能在您的 main.js 中,您已经像上面那样初始化了商店。例如:
import store from '../store/';
new Vue({
store: new Vuex.Store(store),
// ...
})
现在您必须删除该初始化并直接使用商店:
import store from '../store/';
new Vue({
store: store, // or simply store
// ...
})
一切都会好起来的。
我正在尝试验证用户是否经过身份验证,以便能够访问定向的路由,否则重定向到登录路由,问题是我不知道如何执行 fetchUser
来自我的 beforeEach
的动作。换句话说,我无法从路由器 脚本访问我的 getter。
store.js
import mutations from './mutations';
import actions from './actions';
import getters from './getters';
export default {
state: {
isLoggedIn: !!localStorage.getItem("token"),
user_data : localStorage.getItem("user_data"),
},
getters ,
mutations,
actions
}
routes/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import routes from './rutas';
import store from '../store/';
const router = new VueRouter({
mode : 'history',
routes
})
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!store.getters.isLoggedIn) {
next({path: '/login'})
}
else {
store.dispatch('fetchUser') // Line error
next()
}
}
else {
next() // make sure to always call next()!
}
})
getters.js
export default {
isLoggedIn: state => {
return state.isLoggedIn
},
user_name : state =>{
if(! _.isEmpty(this.user_data))
return JSON.parse(state.user_data).name
return '';
},
isEmptyUser : state =>{
return _.isEmpty(this.user_data);
},
isAdmin: state => {
if(! _.isEmpty(this.user_data)) return state.user_data.nivel===1
return false;
}
}
actions.js
export default {
/* more methods*/
, async fetchUser({ commit }) {
return await axios.post('/api/auth/me')
.then(res => {
setTimeout(() => {
localStorage.setItem("user_data", JSON.stringify(res.data));
Promise.resolve(res.data);
}, 1000);
},
error => {
Promise.reject(error);
});
}
控制台中的这个 returns 错误:
_WEBPACK_IMPORTED_MODULE_3__store___.a.dispatch is not a function
我该怎么办或方法不对,我不应该直接访问操作?
问题是您的 store
不是实际的存储对象,它只是用于生成它的对象。
一个解决方案是让文件导出真实存储:
import Vue from 'vue';
import Vuex from 'vuex';
import mutations from './mutations';
import actions from './actions';
import getters from './getters';
Vue.use(Vuex); // added here
export default new Vuex.Store({ // changed here
state: {
isLoggedIn: !!localStorage.getItem("token"),
user_data : localStorage.getItem("user_data"),
},
getters ,
mutations,
actions
}) // changed here
现在您的路由器代码可以工作了。
您还必须注意的是,在某个地方,可能在您的 main.js 中,您已经像上面那样初始化了商店。例如:
import store from '../store/';
new Vue({
store: new Vuex.Store(store),
// ...
})
现在您必须删除该初始化并直接使用商店:
import store from '../store/';
new Vue({
store: store, // or simply store
// ...
})
一切都会好起来的。