Function not recognized by the new Vue Composition API

问题

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()
    }
  }
};

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
    }
  }
})

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

回答1:

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

Try this:

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

来源：https://stackoverflow.com/questions/61653929/function-not-recognized-by-the-new-vue-composition-api