vueリアルタイムでページの幅を取得し、画面に適応

    data(){
        return{
            fullWidth:document.documentElement.clientWidth
        }
    },
    created(){
        window.addEventListener('resize', this.handleResize)
    },
    beforeDestroy: function () {
        window.removeEventListener('resize', this.handleResize)
    },
    computed:{
        ...mapGetters([
            'isCollapse',
        ]),
        rightWidth(){
            let leftWidth = this.isCollapse ? '64' : '200';
            console.log(this.fullWidth)
            return (this.fullWidth-leftWidth)+'px'
        }
    },
    methods: {
        handleResize (event) {
            this.fullWidth = document.documentElement.clientWidth
        },
    }  

私が実現したい機能は、左側のメニューによって、右側のメニューが適応し、最初はcalc(100%-200 px)を使っていましたが、左側のメニューが200 pxに設定されていたので、縮小ボタンをクリックして左側のメニューを閉じると、左側のメニューが200 pxではないことに気づき、リアルタイムで画面の幅を取得したいと思いました.次に、ボタンの開いた状態を縮小することで、このときの左側のメニューの幅、画面の幅-左側のメニューの幅、残りは私たちの右側の内容の幅を取得します.
実はこの1つのとても小さい机能、しかし私の使う地方はとても多くて、例えばechartの中で、mixinsを书くことができてもっと良くて、もし多くのページが使うならば...