新的Vue Composition API无法识别该功能 [英] Function not recognized by the new Vue Composition API

问题描述

我们正在尝试将一个简单的SFC转换为使用新的Vue CompositionAPI.这段代码完美无瑕:

We're trying to convert a simple SFC to use the new Vue CompositionAPI. This code works flawless:

export default {
  data() {
    return {
      miniState: true
    }
  },
  methods: {
    setMiniState(state) {
      if (this.$q.screen.width > 1023) {
        this.miniState = false;
      } else if (state !== void 0) {
        this.miniState = state === true
      }
      else {
        this.miniState = true
      }
    },
  },
  watch: {
    '$q.screen.width'() {
      this.setMiniState()
    }
  }
};

将其转换为新的CompostionAPI如下:

Converting this to the new CompostionAPI looks like this:

export default defineComponent({
  setup() {
    const miniState = ref(true)

    const setMiniState = (state) => {
      if ($q.screen.width > 1023) {
        miniState.value = false
      } else if (state !== void 0) {
        miniState.value = state === true
      }
      else {
        miniState.value = true
      }
    }

    watch('$q.screen.width'(),
      setMiniState()
    )

    return {
      miniState, setMiniState
    }
  }
})

但是，每次我尝试运行此Vue时，都会抱怨$q.screen.width不是函数.我在这里做什么错了?

However, every time I try to run this Vue complains that $q.screen.width is not a function. What am I doing wrong here?

推荐答案

您正在调用$q.screen.width，而不是将其添加为监视源.

You're calling $q.screen.width instead of adding it as a watch source.

尝试一下:

watch('$q.screen.width', (newVal, oldVal) => setMiniState())

这篇关于新的Vue Composition API无法识别该功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！