Vue刷新局部数据的方法

今天在写项目时遇到上传头像后头像没有相应更新的问题，因为上传头像只是将头像上传到云端和数据库，虽然vue具有响应式更新的特性，但这种情况下vm层数据没有更新，页面也就不会响应更新了。这时需要我们手动刷新。如果使用原始方法location.reload()则会造成闪烁，于是我们可以使用以下方法。

1. 在App.vue定义reload方法

<template>
    <div id="app">
    	<router-view v-if="isRouterAlive"></router-view>
	</div>
</template>
<script>
    export default {
        name: 'App',
        provide () {    
        //父组件通过provide来提供变量，在子组件中通过inject来注入变量                                       
            return {
                reload: this.reload                                              
            }
        },
        data() {
            return{
                isRouterAlive: true  //控制视图是否显示
            }
        },
        methods: {
            reload () {
                this.isRouterAlive = false;
                this.$nextTick(function () {
                    this.isRouterAlive = true;
                }) 
            }
        }，
    }
</script>

2. 在需要刷新的组件注入该方法

export default {
    inject:['reload'], //注入App里的reload方法
    data () {
        return {
    	.......
        }
    },

3. 需要刷新时使用reload()方法

this.reload();