Vue.prototype 在页面首次加载时未定义

Question

所以，我正在尝试在我的 main.js 文件中使用 axios 发出请求。

如图所示，我正在使用 vue-router 在加载每个组件之前发出此请求。但是，当我的网页第一次加载时，我无法让它工作。我的意思是，axios 请求是在组件加载后完成的。那么，这将失败：

mounted() {
    if (Vue.prototype.$user.role == "Owner") {
      this.isOwner = true;
      this.estancoId = Vue.prototype.$user.estanco;
    }
  },

它在控制台日志上显示了这个错误：

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'role' of undefined"

found in

---> <Header> at src/components/Header.vue
       <App> at src/App.vue
         <Root>

我尝试使用 async/await 发出此请求，我尝试了 mounted(), created(), beforeMount(), beforeCreate() 方法，但仍然是一样的。我是 Vue.js 的新手，我被困在这里，不知道该怎么办。

编辑整个文件以查看应用结构： ma​​in.js

import router from './router'
import Vue from 'vue'
import App from './App.vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import axios from 'axios'
import Vuex from 'vuex'

// Install BootstrapVue
import 'leaflet/dist/leaflet.css';

Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)
Vue.use(axios)
Vue.use(Vuex)
Vue.config.productionTip = false

const store = new Vuex.Store({
  state: {
    user : {}
  },
  mutations : {
    set_user (state,user) {
      state.user = user
    }
  }
})

export default store

/* eslint-disable */
router.beforeEach((to, from, next) => {
  if (from.path.indexOf("modificarCatalogo") == -1 && to.path.indexOf("modificarCatalogo") == -1) {
    localStorage.removeItem("catalogue");
  }
  if (localStorage.getItem("token") != null) {
    axios
      .get(`${process.env.VUE_APP_API_BASE_URL}/user/role`, {
        headers: {
          Authorization: "Token " + localStorage.getItem("token")
        }
      })
      .then(response => {
        store.commit('set_user', response.data);
        console.log("First then")
        console.log(store.state.user)
      }).catch(function (error) {
         // handle error case here
         console.log(error);

      }).then(function () {
         // always executed
         console.log("Second then")
         next();
      });
     }else{
        next();
     }
});
/* eslint-enable */

Vue.use(router)

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

它现在有 Vuex，因为我尝试了@ellisdod 的答案，但是

App.vue

<template>
  <div>
    <Header />
    <router-view />
    <Footer />
  </div>
</template>

并且，在 Header.vue 中，这是我调用 Vuex $store 的地方，但它是相同的。我需要它无处不在，所以我尝试调用App.vue中的方法但仍然没有结果，它现在使用Vuex的解决方案返回一个空对象，但只是空的，而不是用户数据。

export default {
  name: "Header",
  data() {
    return {
      token: localStorage.getItem("token"),
      isOwner: "",
      estancoId: ""
    };
  },
  mounted() {
    console.log("Header log")
    if (this.$store.state.user.role == "Owner") {
      this.isOwner = true;
      this.estancoId = this.$store.state.user.estanco;
    }
  },

我认为其余的组件无关紧要

Answer 1

嗨，

根据问题编辑、评论和答案完成答案：

问题

Vue-router 的 beforeEach 方法只会在路由中定义的组件中执行。
在你的情况下，

1. beforeEach 不会在 Header 组件中调用，因为它不是路由的一部分。它是一个独立的组件。
   因此，您无法访问其中的$user。

store.js

    import axios from 'axios'
    import Vuex from 'vuex'

    const store = new Vuex.Store({
    state: {
      user : {}
    },
    mutations : {
      set_user (state,user) {
        state.user = user
      }
    }
    actions : {
        loadUserFromLocal ({commit,state}) {
          if (localStorage.getItem("token") === null) return null
          return axios
            .get(`${process.env.VUE_APP_API_BASE_URL}/user/role`, {
            headers: {
              Authorization: "Token " + localStorage.getItem("token")
            }
          })
          .then(response => {
            commit('set_user', response.data);
            console.log("First then")
            console.log(state.user)
          }).catch(function (error) {
             // handle error case here
             console.log(error);
          })

        }
      }
    })
    export default store

@ellisdod - 谢谢。

现在您可以在组件中使用 store 中的用户变量，并在数据提取完成时更新或显示初始值直到那时

因此无需在 router.beforeEach 中获取数据

router.js

    // --> all imports
    import store from './store' // --> added
    //  --> all routes to be defined here... 

    router.beforeEach((to, from, next) => {
     // --> other logic for filtering routes
     // --> you can use 'store' variable here to get the user data and add 
    filtering 
    if (from.path.indexOf("modificarCatalogo") == -1 && 
    to.path.indexOf("modificarCatalogo") == -1) {
    localStorage.removeItem("catalogue");
     }
     next();

    });

正如你在 vue-router 中所知道的，如果调用 next 则表示导航被确认并且组件将被渲染。
有关在router.beforeEach 方法中使用存储变量的更多信息，请参阅this question

ma​​in.js

    import router from './router'

    import store from './store' // --> added

    import Vue from 'vue'
    import App from './App.vue'
    import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
    import 'bootstrap/dist/css/bootstrap.css'
    import 'bootstrap-vue/dist/bootstrap-vue.css'
    import axios from 'axios'
    import Vuex from 'vuex'
    // Install BootstrapVue
    import 'leaflet/dist/leaflet.css';

    Vue.use(BootstrapVue)
    // Optionally install the BootstrapVue icon components plugin
    Vue.use(IconsPlugin)
    Vue.use(axios)
    Vue.use(Vuex)
    Vue.config.productionTip = false


    Vue.use(router)

    new Vue({
      router,
      store    // --> added
      render: h => h(App),
    }).$mount('#app')

App.vue

mounted () {
    this.$store.dispatch('loadUserFromLocal')
  }

@ellisdod - 谢谢。

Header.vue

    export default {
      name: "Header",
      data() {
       return {
        token: localStorage.getItem("token")
       };
      },
      computed: {
       isOwner() {
         return this.$store.state.user.role == "Owner"
       }
       estancoId () {
         return this.$store.state.user.estanco;
       }
      }
      mounted() {
       console.log("Header log")
      },
    }

Answer 2

如果你使用 Vuex 来存储你的用户数据，你可以用一个空对象预填充用户值，这样它就不会抛出错误。

const store = new Vuex.Store({
  state: {
    user : {}
  },
  mutations : {
    set_user (state,user) {
      state.user = user
    }
  },
  actions : {
    loadUserFromLocal ({commit,state}) {
      if (localStorage.getItem("token") === null) return null
      return axios
        .get(`${process.env.VUE_APP_API_BASE_URL}/user/role`, {
        headers: {
          Authorization: "Token " + localStorage.getItem("token")
        }
      })
      .then(response => {
        commit('set_user', response.data);
        console.log("First then")
        console.log(state.user)
      }).catch(function (error) {
         // handle error case here
         console.log(error);
      })

    }
  }
})

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

然后在你的主 App 组件的挂载钩子中添加：

mounted () {
    this.$store.dispatch('loadUserFromLocal')
  }

现在在您的路由器中，而不是在每条路由之前发出服务器请求，您只需检查存储：

if (this.$store.state.user.role) {
  // handle logged in user
}