vue.js - 试图在我的 Vue 组件中访问mounted() 中的状态对象

Question

我有一个包含用户 ID 的 Vuex 状态。在我的组件的 mounted() 中，我尝试使用该用户 ID，但它始终为 null。

我如何从计算的 mapGetters 中获取状态到我的 mounted()？

这是我的计算:

computed: {
  ...mapGetters('auth', [
    'userid'
  ])
}

这是我的 mounted():

mounted () {
  HTTP.get('account/' + this.userid + '/')
      .then((response) => {
        this.account = response.data
      })
}

this.userid 始终为 null。

顺便说一句，当我查看 Vue 检查器时，auth/userid 在 getter auth/userid 中具有正确的值。如何从 mounted() 访问 auth.userid？

Answer 1

userid 在安装组件时可能不可用。您可以通过查看 userid 值来修复它，并且仅在 userid 更改且可用时调用 HTTP 请求:

computed: {
  ...mapGetters('auth', [
    'userid'
  ])
},
watch: {
  'userid': {
    handler (newVal) {
      if (newVal) { // check if userid is available
        this.getAccountInformation()
      }
    },
    immediate: true // make this watch function is called when component created
  }
},
methods: {
  getAccountInformation () {
    HTTP.get('account/' + this.userid + '/')
        .then((response) => {
          this.account = response.data
        })
  }
}