关于vue中computed和mounted的执行问题

Question

在vue组件中的computed中获取了vuex中的属性，然后在created生命钩子中使用state中的属性发送了请求发现mounted发送请求时参数没有获取到，页面更新之后才正确：computed: {      ...(mapState({        user_name: state => state.user_name,        user_id: state => state.user_id,        user_source: state => state.user_source,      }))    }    created() {      request(extend(true, {}, apis.getUserConsultInfo, {        params: {          consult_id: this.consult_id,          user_id: this.user_id,          user_source: this.user_source        }      })).then((res) => {        console.log(res);      }, (errmsg) => {        this.$message.error(errmsg);      });    }这种情况怎么破？求大神解决～～

Answer 1

凡是需要处理vuex的getter中的数据，均在beforeUpdate或者update阶段进行。

8百年前做的一个实验：笑纳。

11个生命周期打印计算属性值（前6个有输出，后5个无输出）

各生命周期打印从vuex的getter获取到的计算属性结果。

mounted阶段的打印尝试，其余的也类似：

    mounted(){

        console.log("mounted↓")

        console.log(this.users)

    }

从vuex getter获取到的数据：

    computed:mapGetters({

        users:'allUsers'

    }),

打印结果：

经过观察发现，vue组件生命周期的11个阶段，只有前6个阶段有输出结果。
beforeDestroy，destroyed，activated，deactivated，errorCaptured都没有输出结果。
在前6个阶段的初始输出结果均不是有效数据，beforeCreate的undefined和其他阶段的observer，均是无效数据。
直到16:28:33.740，才开始获得有效数据，且只在before和updated阶段获取到数据。

我们根据实验结果得出一个结论：凡是需要处理vuex的getter中的数据，均在beforeUpdate或者update阶段进行。