问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
需求是做一套后台管理界面,要有权限管理的相关功能.相关思路是参照这篇文章来的.具体做法是在登录时后台返回角色拥有的权限,通过调用addRoutes方法动态加载,vuex管理路由加载状态以及加载的路由,并在进行commit操作时存入sessionStorage.正常情况下登录后,菜单正常显示并可以点击出相关界面.F5页面刷新后从sessionStorage中取出重新加载路由数据,这时候菜单依然能正常显示,但是点击的时候就抛错:
vue.esm.js?65d7:431 [Vue warn]: Error in beforeCreate hook: "TypeError: Cannot read property 'call' of null"
初学小白,求大牛们帮忙看看问题出在哪里
login.vue代码片段
computed:{
...mapGetters([
'menuitems',
'isLoadRoutes'
methods: {
rememberPwd(){
if(this.checked){
localStorage.setItem('account',this.ruleForm2.account);
localStorage.setItem('password',this.ruleForm2.checkPass );
removePwd(){
if(this.checked){
localStorage.removeItem('account');
localStorage.removeItem('password');
handleReset2() {
this.$refs.ruleForm2.resetFields();
this.removePwd();
handleSubmit2(ev) {
var _this =
this.$refs.ruleForm2.validate((valid) =& {
if (valid) {
//_this.$router.replace('/table');
this.logining =
//NProgress.start();
var loginParams = { username: this.ruleForm2.account, password: this.ruleForm2.checkPass };
requestLogin(loginParams).then(res =& {
this.logining =
//NProgress.done();
if (res.data.resultCode !== "SUCCESS") {
this.$message({
message: res.data.resultDesc,
type: 'error'
this.loginUser=res.data.userP
this.routes=res.data.
if(this.loginUser.doRemove){
this.removePwd();
this.rememberPwd();
sessionStorage.setItem('user', JSON.stringify(res.data.userProfile));
sessionStorage.setItem('security', JSON.stringify(this.routes));
this.addMenu(this.routes);
/*this.$router.push(this.routes);*/
if (!this.isLoadRoutes) {
this.$router.addRoutes(this.routes);
for(let route of this.routes){
(JSON.stringify(route));
this.$router.options.routes.push(route);
this.loadRoutes();
('push to home')
this.$router.push({ path: '/' });
console.log('error submit!!');
...mapActions([
'addMenu',
'loadRoutes'
store.js 相关代码
import {ADD_MENU,LOAD_ROUTES,INIT_FROM_LS} from './mutations_type'
export const state = {
isLoadRoutes: false
export const mutations = {
[ADD_MENU] (state, menuItems) {
('addmenu mutations');
if (menuItems.length === 0) {
state.items = []
state.items = menuI
sessionStorage.setItem('state.items',JSON.stringify(state.items));
[LOAD_ROUTES] (state) {
state.isLoadRoutes = !state.isLoadR
sessionStorage.setItem('state.isLoadRoutes',JSON.stringify(state.isLoadRoutes));
('change load routes states ' +state.isLoadRoutes);
[INIT_FROM_LS](state){
if (sessionStorage.getItem('state.items')) {
state.items = JSON.parse(localStorage.getItem('state.items'));
if (sessionStorage.getItem('state.isLoadRoutes')) {
state.isLoadRoutes = JSON.parse(localStorage.getItem('state.isLoadRoutes'));
('init from ls '+JSON.stringify(state));
getters.js
const menuitems = state =& state.items
const isLoadRoutes = state =& state.isLoadRoutes
menuitems,
isLoadRoutes
import {ADD_MENU,LOAD_ROUTES,INIT_FROM_LS} from './mutations_type'
export const addMenu = ({ commit }, menuItems) =& {
if (menuItems.length & 0) {
commit(ADD_MENU, menuItems)
export const loadRoutes = ({commit}) =& {
commit(LOAD_ROUTES)
export const initFromLs=({commit})=&{
commit(INIT_FROM_LS)
import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import {mutations,state} from './menu'
Vue.use(Vuex)
// 创建 store 实例
export default new Vuex.Store({
import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import VueRouter from 'vue-router'
import store from './vuex/store'
import Vuex from 'vuex'
import 'font-awesome/css/font-awesome.min.css'
import {state} from
'./vuex/menu'
import Login from './views/Login.vue'
import NotFound from './views/404.vue'
import Home from './views/Home.vue'
Vue.use(ElementUI)
Vue.use(VueRouter)
Vue.use(Vuex)
const router = new VueRouter({
path: '/login',
component: Login,
hidden: true
path: '/404',
component: NotFound,
hidden: true
path: '/',
component: Home,
hidden: true
...generateRoutesFromMenu()
// Menu should have 2 levels.
function generateRoutesFromMenu (routes = []) {
store.dispatch('initFromLs');
for (let i = 0, l = state.items. i & i++) {
let item = state.items[i]
if (item.path) {
routes.push(item);
('generate menu = '+state.items +' routes = '+routes);
return routes
router.beforeEach((to, from, next) =& {
//NProgress.start();
if (to.path == '/login') {
sessionStorage.removeItem('user');
sessionStorage.removeItem('security');
sessionStorage.removeItem('state.items');
sessionStorage.removeItem('state.isLoadRoutes');
let user = JSON.parse(sessionStorage.getItem('user'));
if (!user && to.path != '/login') {
next({ path: '/login' })
render: h =& h(App)
}).$mount('#app')
初次登录后点击左侧菜单正常
F5刷新之后点击菜单抛错.]
vue.esm.js?65d7:520 TypeError: Cannot read property 'call' of null
at callHook (eval at &anonymous& (app.js:770), &anonymous&:2533:20)
at VueComponent.Vue._init (eval at &anonymous& (app.js:770), &anonymous&:3969:5)
at new VueComponent (eval at &anonymous& (app.js:770), &anonymous&:4140:12)
at createComponentInstanceForVnode (eval at &anonymous& (app.js:770), &anonymous&:3495:10)
at init (eval at &anonymous& (app.js:770), &anonymous&:3329:45)
at createComponent (eval at &anonymous& (app.js:770), &anonymous&:4871:9)
at createElm (eval at &anonymous& (app.js:770), &anonymous&:4814:9)
at VueComponent.patch [as __patch__] (eval at &anonymous& (app.js:770), &anonymous&:5309:9)
at VueComponent.Vue._update (eval at &anonymous& (app.js:770), &anonymous&:2300:19)
at VueComponent.updateComponent (eval at &anonymous& (app.js:770), &anonymous&:2416:10)
handleError @ vue.esm.js?65d7:520
callHook @ vue.esm.js?65d7:2534
Vue._init @ vue.esm.js?65d7:3968
VueComponent @ vue.esm.js?65d7:4139
createComponentInstanceForVnode @ vue.esm.js?65d7:3494
init @ vue.esm.js?65d7:3328
createComponent @ vue.esm.js?65d7:4870
createElm @ vue.esm.js?65d7:4813
patch @ vue.esm.js?65d7:5308
Vue._update @ vue.esm.js?65d7:2299
updateComponent @ vue.esm.js?65d7:2415
get @ vue.esm.js?65d7:2754
run @ vue.esm.js?65d7:2824
flushSchedulerQueue @ vue.esm.js?65d7:2591
(anonymous) @ vue.esm.js?65d7:652
nextTickHandler @ vue.esm.js?65d7:599
vue.esm.js?65d7:431 [Vue warn]: Failed to mount component: template or render function not defined.
---& &Home& at C:\Users\Dio\git\vue-admin\src\views\Home.vue
&App& at C:\Users\Dio\git\vue-admin\src\App.vue
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我觉得可以参考一下这篇文章
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：问题： (vue.js)vuex store传递出错问题
描述:main.js代码如下：// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import VueRouter from 'vue-router'
import store from './store'
import App from './App'
import Icons from './components/Icons.vue'
Vue.use(VueRouter);
const routes = [
{ path: '', component: Icons },
// { path: '/bar', component: Bar }
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
const icons = new Vue({
}).$mount('#icons-bar')
/* eslint-disable no-new */
var app = new Vue({
el: '#app',
template: '&App/&',
components: { App }
var position = new Vue({
el: '#position',
computed: {
console.log(store.state);
return store.state.
methods: {
increment () {
mit('increment')
var motto = new Vue({
el: '#motto',
show:false,
motto:'"我怎能轻易倒下，我的背后空无一人"'
exports.position =
exports.motto =store.js代码如下：import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
hide: true
mutations: {
increment: state =& !state.hide,
console.log("hah"+store.state.hide);
module.exports = {
store: store
浏览器报错如下：也就意味着 store成功导入了。但是store.state是undefined 没有传过来同求助解决方案1:剛看錯了，應該是要改這樣：module.exports = store
以上介绍了“ (vue.js)vuex store传递出错问题”的问题解答，希望对有需要的网友有所帮助。
本文网址链接：/itwd/4155781.html
上一篇： 下一篇：VUE使用vuex解决模块间传值问题的方法
作者：Fayin
字体：[ ] 类型：转载 时间：
本篇文章主要介绍了VUE使用vuex解决模块间传值问题 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在看电影、打Dota、撸代码间来回，犹豫不决，终于还是下决心继续学习VUE。
仿照 conde.js 官网写的一个demo，目前已经基本可用，但始终缺少登录页，没有用户权限管理，于是开撸......
&template&
&div id="login"&
&c-header&&/c-header&
&c-form&&/c-form&
&p class="content-block"&&a href="javascript:;" rel="external nofollow" rel="external nofollow" @click=showState class="button button-fill button-success"&登录&/a&&/p&
&/template&
外观大概是这样的：
两个输入项通过 c-form 组件导入
由于没有登录接口调用，初步想法是：点击登录，将c-from组件输入的值（用户名和密码）保存在 sessionStorage 中，通过判断 sessionStorage 是否保存了用户信息，来决定用户的操作权限。
现在问题来了——点击登录，如何取得 c-form 组件中的输入值？
最直接的想法就是通过子组件派生事件，父组件监听触发。转念一想，何不使用vuex来进行管理呢？正好之前从来没有认真对待过它。
坑坑坑，我踩踩踩
终于，总结出使用 vuex 的三大步骤：
步骤1：安装和创建
安装 vuex：npm i vuex --save
创建 store.js，把基本格式写好：
import Vue from 'vue'
import Vuex from 'vuex'
// 首先声明一个状态 state
const state = {
// 然后给 actions 注册一个事件处理函数，当这个函数被触发时，将状态提交到 mutaions中处理
const actions = {
saveName({commit}, msg) {
commit('saveMsg', msg) // 提交到mutations中处理
// 更新状态
const mutations = {
saveMsg(state, msg) {
state.msg =
// 获取状态信息
const getter = {
showState(state) {
console.log(state.msg)
// 下面这个相当关键了，所有模块，记住是所有，注册才能使用
export default new Vuex.Store{
mutations,
步骤2：在子组件中使用（保存输入）
具体到我这里，是在c-form中使用它：
&template&
&input type="text" @blur=saveName(username) v-model="username" placeholder="Your name"&
&/template&
&script type="text/javascript"&
// 引入mapActions，很重要
import { mapActions } from 'vuex'
export default {
username:'',
password: ''
methods: {
...mapActions({
// 在input 的blur 事件中触发回调，并将输入值作为参数返回到store中
saveName: 'saveName'
步骤3：获取在步骤2 中的输入值（获取state）
&template&
&div id="login"&
&c-header&&/c-header&
&c-form&&/c-form&
&p class="content-block"&&a href="javascript:;" rel="external nofollow" rel="external nofollow" @click=showState class="button button-fill button-success"&登录&/a&&/p&
&/template&
// 引入mapGtters，很重要
import { mapGetters } from 'vuex'
export default {
methods: {
...mapGetters([
// 在store.js 中注册的getters
'showState'
components: {
"c-form": require('../components/form.vue'),
"c-header": require('../components/header.vue')
至此，我们就能得到输入值了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具}