Функция не распознается новым API Vue Composition

Question

Мы пытаемся преобразовать простой SFC для использования нового Vue CompositionAPI. Этот код работает безупречно:

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 выглядит так:

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это не функция. Что я здесь делаю не так?

Answer 1

Ты звонишь $q.screen.width вместо добавления его в качестве источника наблюдения.

Попробуй это:

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