Question

在我的根Vue实例中，我定义了一个isAdmin()方法，该方法对API端点执行ajax请求并确定用户是否是管理员，我将此方法放在那里，因为需要很多子组件知道用户是否是管理员。

我遇到的问题是，当组件访问根元素数据isAdmin时，该值仍为false（默认值），并且由于该属性位于根实例中，因此该组件执行对变化没有反应。

哪种方法可以解决我想要实现的目标？我试图避免让每个组件对同一个端点进行自己的API调用。

根实例：

window.App = new Vue({
  el: '#app',

  data: {
    isAdmin: false
  },

  created()
  {
    this.checkIfAdmin()
  },

  methods: {
    /**
     * Check if the logged in User is an administrator.
     */
    checkIfAdmin()
    {
      axios.get('/api/auth/isAdmin')
           .then(({data}) => this.isAdmin = data)
    }
  }
});

然后是儿童组成部分：

mounted()
{
  if (this.$root.$data.isAdmin) {
    //Does not fire as `isAdmin` is still false at the time of parsing
    console.log('I am an admin!')
  }
},

我的一些组件不是直接的孩子..即孙子。

Answer 1

this.$parent.isAdmin应该会给你想要的结果。

忘记提及，我的一些组件不是直接的孩子..即孙子。

啊，是的，你可以使用this.$root.isAdmin。

来自根实例的共享数据

1 个答案: