vue中页面渲染问题

目前有很多页面渲染在修改数据过后需要刷新一次，或几次的情况，我分享我遇到这个问题时时怎么解决的。

<template>
    <div>

        <div id="Myimg">
            <van-uploader :after-read="afterRead" v-model="fileList" name="image">
                <van-image width="100" height="100" :src="headImage" />
            </van-uploader>



        </div>

        <van-form @submit="onSubmit">
            <van-field v-model="phone" name="用户名" placeholder="用户名" />
            <van-field v-model="nickname" name="nickname" placeholder="昵称" />
            <van-field v-model="weight" name="weight" placeholder="体重" />
            <van-field v-model="height" name="height" placeholder="身高" />
            <van-field name="radio" label="单选框">
                <template #input>
                    <van-radio-group v-model="sex" direction="horizontal">
                        <van-radio :name="1">男</van-radio>
                        <van-radio :name="0">女</van-radio>
                    </van-radio-group>
                </template>
            </van-field>


            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit" @click="updataUser()">提交</van-button>
            </div>
        </van-form>
    </div>
</template>

上面这一段时组件的页面代码

下面是对页面的数据的动态渲染

<script>
import Vue from 'vue';
import { Toast } from 'vant';
import { mapActions } from 'vuex'
import { Uploader } from 'vant';
Vue.use(Uploader);

export default {
    name: 'Sec3JianshenfangMyDataView',

    data() {
        return {
            fileList: [],
            phone: "",
            password: '',
            nickname: '',
            weight: '',
            height: '',
            sex: '',
            headImage: ''


        };
    },

    mounted() {
        console.log("mounted");
        this.getUserList()//挂载完成时获取USerlist
    },

    methods: {
        ...mapActions("AppUserOption", ['AppUser']),
        ...mapActions("updataAppUserOption", ['updataAppUser']),
        ...mapActions("AppHeadshotOption", ['AddHeadshot']),

        onSubmit(values) {
            console.log('submit', values)
        },
        onConfirm(value) {
            this.value = value;
            this.showPicker = false;
        },
        onConfirm_time(date) {
            this.value_time = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
            this.showCalendar = false;
        },
        afterRead(file) {//头像上传
            const forms = new FormData();
            forms.append("image", file.file);
            this.AddHeadshot([forms, this.imgHeadshot])
            // 此时可以自行将文件上传至服务器
        },
        //页面的渲染
        displayMyData() {
            let data = JSON.parse(localStorage.getItem("vuex"))
            this.phone = data.AppLoginOption.user.phone
            this.nickname = data.AppUserOption.User.nickname
            this.height = data.AppUserOption.User.height
            this.sex = data.AppUserOption.User.sex
            this.weight = data.AppUserOption.User.weight
            this.headImage = data.AppHeadshotOption.Headshot.image

        },
        getUserList() {//通过ID发起请求拿到后台UserList
            console.log("getUserlist")
            let data = JSON.parse(localStorage.getItem("vuex"))//在本地储存中拿到数据
            let id = data.AppLoginOption.user.id//拿到需要的ID
            this.AppUser([id, this.displayMyData])//调用vuex中actions方法，传回参数以及回调函数
            

//渲染问题也就是出现在这里，如果把displayMyData（）这个方法卸载挂载后，数据渲染是会失败的，需要刷新页面两次，
            


//所以需要把他当一个回调函数在发起请求后在来执行这个函数，那么数据就可以动态渲染，不会出现需要页面刷新的情况
            //this.displayMyData();
        },
        updataUser() {//修改页面数据事件
            let data = JSON.parse(localStorage.getItem("vuex"))
            let id = data.AppLoginOption.user.id
            this.updataAppUser([id, this.height, this.nickname, this.sex, this.weight, this.headImage, this.updata])
        },
        updata(res) {
            if (res.data.code == 200) {
                Toast.success('保存成功')
                // this.displayupdataMydata()

            }
        },
        imgHeadshot(res) {
            if (res.data.code == 200) {
                Toast.success('上传成功')
            }
        }

    },
};
</script>

上面不管是把渲染方法写在mounted（）中还是卸载，getUserList（）中都是需要刷新的，这个原因是因为我是从本地储存中拿去数据，本地储存在我修改数据过后需要重新在vuex拿去数据，第一次刷新，本地储存数据修改，但是在修改之前页面已经渲染了，所以需要二次刷新页面才会刷新成功。