Question

我使用 vue.js 来管理用户，我有这段代码来初始化 vue：

const app = new Vue({
    el: '#dashboard',
    i18n: i18n,
    data:{ store },
    router: router,
    created()
    {
      this.store.user.actions.getUser();
    }
});

在 store 里面我有：

const store =
{
  user:
  {
    state:
    {
      user: null
    },
    actions:
    {
      getUser()
      {
        //method to retrieve user usign axios
      }
    }
  }
}

这样，用户就被正确初始化了。

现在，我还有一个带有以下内容的 vue 组件：

computed:
{
  getUser()
  {
    console.log(this.$root.store.user.state.user)
  }
},
methods:
{
  init()
  {
    console.log(this.$root.store.user.state.user)
  }
},
created()
{
  this.init();
}

但是 console.log(this.$root.store.user.state.user) 方法中的 init() 结果为 null，而 computed 中的一个返回实际用户。

为什么会这样？ init() 方法不应该返回用户吗？

谢谢大家。

Answer 1

如果您能够将 init() 方法更改为返回 Promise - 那么您可以在实例化整个 Vue 应用程序之前等待该 Promise 解析：

store.init().then(() =>
{
  const app = new Vue({
    el: '#dashboard',
    i18n: i18n,
    data:{ store },
    router: router,
    created()
    {
      this.store.user.actions.getUser();
    }
  });
});

Vuejs - 无法从组件访问 $root 数据

1 个答案: