sizeScale: window.sizeScale ? window.sizeScale : 1, replacement by vue-window-size

[jasperf]

We are using this in a Vue component:

...
data() {
        return {
            sizeScale: window.sizeScale ? window.sizeScale : 1,
        }
    },

    mounted () {
      EventBus.$on('windowResize', this.updateFontSize);
      this.updateFontSize()
    },

    methods: {
      updateFontSize () {
        this.sizeScale = window.sizeScale ? window.sizeScale : 1

        // Use fontSize or styleObject?
        $(this.$refs.textModule).css('font-size', 11 * window.sizeScale + 'px')

        $('style#text-module-style').remove()
        $('head').append(`<style id="text-module-style">.text-module .mce-nbsp-wrap { min-width: ${25 * sizeScale}px; }</style>`)
      }
    },
...

Would this vue-window-size package be a good fit dealing with this font resizing based on window resize? If so, any pointers on how to approach this?

P.S. Using Vue 2

[mya-ake]

If you use vue-window-size, it will probably look like this:

...
data() {
  return {
    sizeScale: 1,
  }
},
computed: {
  // In order to determine if it has been resized, the value of width and height must be added together.
  windowSize() {
    return this.$windowWidth + this.$windowHeight
  }
},
watch: {
  windowSize: {
    immediate: true,
    handler: 'updateSizeScale'
  },
  sizeScale: {
    immediate: true,
    handler: 'applyFontSize'
  }
},
methods: {
  updateSizeScale() {
    this.sizeScale = window.sizeScale ? window.sizeScale : 1
  },
  applyFontSize() {
    // Use fontSize or styleObject?
    $(this.$refs.textModule).css('font-size', 11 * this.sizeScale + 'px')

    $('style#text-module-style').remove()
    $('head').append(`<style id="text-module-style">.text-module .mce-nbsp-wrap { min-width: ${25 * this.sizeScale}px; }</style>`)
  }
}
...

[jasperf]

@mya-ake Thank you very much for that. And I guess I could move applyFontSize() and or updateSizeScale() to computed properties as well as all is now reactive too? Or not? Would perhaps speed things up reading Vue Docs. That was also in my thoughts besides getting rid of the jQuery part of things.

[mya-ake]

@jasperf I don't think it is possible to write applyFontSize and updateSizeScale in computed. The updateSizeScale is not recalculated in computed because it depends on the value of window, similar to the Date.now() example in Vue Docs. And we can write applyFontSize in computed, but since there is no value to return and nothing to cache in computed, we call it in watch.

[jasperf]

@mya-ake Much clearer now. As we still depend on the value of window for calculations we cannot use computed properties. And as we do not return data in applyFont we do not cache and so are better of using watch as computed properties caching cannot be used. Thanks again for taking the time. Will close issue for now.