新 Vue Composition 无法识别的功能 API

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

新 Vue Composition 无法识别的功能 API

Function not recognized by the new Vue Composition API

javascript

vue.js

vue-component

quasar-framework

vue-composition-api