vue 从store赋值给data里某个参数值的问题

要在如下的html中渲染一个uploader数据

<el-col :span="24">
     <el-form-item label="上传人" >
           <span style="color:red;">{
    
    {
    
    form.uploader}}</span>
           <!-- <span v-else style="color:red;">{
    
    {
    
    username}}</span> -->
     </el-form-item>
</el-col>

正确写法一

created(){
    
    
//要在created里面直接赋值的话 uploader能赋上值,但是在上面的标签中是渲染不出来的
      let _this = this
      setTimeout(function(){
    
    
      _this.form.uploader = _this.$store.state.user.username==null? 'userinfo里为null':_this.$store.state.user.username; // 定时器里是拿不到this的,需要更改指向
       },100)
    },

正确写法二

computed: {
    
    
       ...mapGetters([
         'username' //这个值是store里面存的值
       ])
    },

错误写法

created(){
    
    
// 这里这样写打debugger uploader也能赋值,但是页面渲染并没有值
        this.form.uploader = this.$store.state.user.username==null? 'userinfo里为null':this.$store.state.user.username;
    },

分析了一下, 是this的指向问题, 打印一下,结果this的指向是正常的,

那么我们再来看vue的生命周期问题
官网的介绍

也就是说页面挂载阶段还没开始
this.form.uploader,已经被赋值了,
但是页面渲染后仍然没有值
百思不得其解
如果有朋友碰到了同样的问题找到了问题所在还请不吝赐教