Vue中如何在mounted钩子触发前使用mapState映射的状态值

你遇到的无法提前获取mapState值的问题，绝大多数情况不是mapState初始化晚，而是Vuex中authority、idx两个状态是异步更新的（比如通过登录接口、用户信息接口返回后才写入Store），组件触发mounted钩子时，Store还未完成这两个值的赋值，才会导致判断逻辑失效。

方案1：用watch监听状态（推荐，兼容异步赋值场景） #

直接监听映射后的authority和idx，状态更新后自动触发请求逻辑，适配状态异步更新的场景，还支持后续权限变化时自动重新拉取数据：

export default {
  // 其他原有代码不变
  watch: {
    authority: {
      immediate: true, // 组件初始化时立即执行一次，不用等状态变化
      handler(val) {
        // 排除空初始值的误触发
        if (val === 1) {
          this.getUserList()
        } else if (this.idx) {
          this.getUserSingle(this.idx)
        }
      }
    },
    // 若idx可能比authority更晚更新，额外加监听
    idx(val) {
      if (this.authority !== 1 && val) {
        this.getUserSingle(val)
      }
    }
  }
}

方案2：提前到beforeMount钩子调用 #

computed属性的初始化在beforeMount阶段就已经完成，早于mounted，如果你的Store状态在组件创建前已经同步赋值完成，可以把请求逻辑前移到beforeMount：

export default {
  // 其他原有代码不变
  beforeMount() {
    if(this.authority == 1){
      this.getUserList()
    }else{
      this.getUserSingle(this.idx)
    }
  }
}

方案3：直接读取原生Store值 #

你可以在任意生命周期钩子（包括最早的created钩子）直接读取Vuex实例的原始状态，不需要等mapState映射完成：

export default {
  // 其他原有代码不变
  created() {
    // 直接从store根实例取值，对应你mapState里命名为store的模块
    const { authority, id: idx } = this.$store.state.store
    if(authority == 1){
      this.getUserList()
    }else if(idx){
      this.getUserSingle(idx)
    }
  }
}

你当前代码里在mounted绑定了全局bus事件，需要在组件销毁前解绑，避免内存泄漏、重复触发问题：

beforeDestroy() {
  this.$bus.$off('closeModal')
}

内容的提问来源于stack exchange，提问作者niddddddfier