vue provide注入方法如何改写成ts装饰器的形式

Question

强制刷新页面

<template>
  <div id="app">
    <router-view v-if="isRouterAlive"/>
  </div>
</template>

<script lang="ts">
import {Component,Vue,Inject,Provide} from 'vue-property-decorator'

@Component({
    name: 'App',
})

export default class extends Vue {
    private isRouterAlive  = true

    public reload(){
        this.isRouterAlive = false
        this.$nextTick(()=>{
            this.isRouterAlive = true
        })
    }

    @Provide()
    reload = this.reload

}

</script>

像这样写会报重复的标识符

Answer 1

<template>

 <div id="app">

 <router-view v-if="isRouterAlive" />

 </div>

</template>

<script lang="ts">

import { Component, Vue, Inject, Provide } from 'vue-property-decorator'

@Component({

 name: 'App',

})

export default class extends Vue {

 private isRouterAlive = true

 @Provide('reload')

 reload () {

 this.isRouterAlive = false

 this.$nextTick(() => {

 this.isRouterAlive = true

 })

 }

}

</script>

<style lang="scss">

</style>

关于子组件的调用

@Component({
    name: 'Dashboard'
})
export default class extends Vue {
    @Inject('reload') readonly reload!: Function;

    get name() {
        return UserModule.name;
    }

    get roles() {
        return UserModule.roleCode;
    }

    handleLogout() {
        console.log('logout');
        this.reload();
        AuthModule.logout();
    }
}