新的 Vue 组合 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())