Javascript Vue路由器-每次之前从内部传递数据

在本例中，我很难将数据从beforeachto、from、next Vue路由器中间件中的userInfo令牌传递到Coresponding Vue组件。我正在处理Vue单页组件文件，如下所示：

App.js入口点

<template>
    <div id="app">
        <Navigation/>
        <router-view/>
        <Footer/>
     </div>
</template>

到目前为止我所做的： 我尝试从入口点->路由器->组件将userInfo作为属性传递。但是，由于信息是异步的，所以它不起作用

我试图将beforeach中的数据附加到元对象。但我发现自己无法访问组件中的元对象

也许我的方法是完全错误的。在这种情况下：是否有更好的方法将接收到的用户数据传递给Vue组件并使其在那里可用

---

提前感谢您。

我将使用一个州管理库来处理此问题

您需要使用创建Vuex模块并将其添加到根Vue实例，如下所示：

const store = new Vuex.Store({
  state: { userData: {} },
  mutations: {
    SET_USER_DATA: (state, data) => state.userData = data,
  }
});

new Vue({     // your root Vue instance
  el: '#app', // or whatever you've bound to root instance to
  store,      // the reference to the Vuex store
  ...         // the rest of the root Vue definition
})

现在，根Vue实例及其所有内部组件将通过$store属性引用Vuex存储

然后，您可以通过调用store.commit在axios回调中设置userData，这将随后在Vuex存储中调用指定的变量。这将要求您在此范围内还具有对Vuex存储对象的引用：

axios.post('http://localhost:4000/auth').then((result) => {
  store.commit('SET_USER_DATA', result);
  next();
});

您可以通过$store对象从任何组件访问userData：

---

请注意，我还更新了welcomeMsg computed以修复拼写，并使用状态管理库处理此问题

您需要使用创建Vuex模块并将其添加到根Vue实例，如下所示：

const store = new Vuex.Store({
  state: { userData: {} },
  mutations: {
    SET_USER_DATA: (state, data) => state.userData = data,
  }
});

new Vue({     // your root Vue instance
  el: '#app', // or whatever you've bound to root instance to
  store,      // the reference to the Vuex store
  ...         // the rest of the root Vue definition
})

现在，根Vue实例及其所有内部组件将通过$store属性引用Vuex存储

然后，您可以通过调用store.commit在axios回调中设置userData，这将随后在Vuex存储中调用指定的变量。这将要求您在此范围内还具有对Vuex存储对象的引用：

axios.post('http://localhost:4000/auth').then((result) => {
  store.commit('SET_USER_DATA', result);
  next();
});

您可以通过$store对象从任何组件访问userData：

---

请注意，我还更新了welcomeMsg computed以修复拼写，并

非常感谢您抽出时间。我不知道你能做到。我现在就试试，给你反馈。谢谢@奥克，没问题。不过，我确实回溯了我最初的答案。我认为您可以在下一次回调中访问Vue实例，但这只是在beforeEnter导航保护中，而不是beforeEach中。我仍然认为在您的情况下使用Vuex是一个很好的解决方案，所以我对它进行了一些调整。非常感谢您抽出时间。我不知道你能做到。我现在就试试，给你反馈。谢谢@奥克，没问题。不过，我确实回溯了我最初的答案。我认为您可以在下一次回调中访问Vue实例，但这只是在beforeEnter导航保护中，而不是beforeEach中。我仍然认为在您的情况下使用Vuex是一个很好的解决方案，所以我对它做了一些调整。

export default {
  computed: {
    welcomeMsg() {
      let { userName } = this.$store.state.userData || {};
      return (userName) ? 'Hello ' + userName : '';
    }
  }
}