新的 Vue 组合 API 无法识别函数

Posted 2023-02-23

【中文标题】新的 Vue 组合 API 无法识别函数

【英文标题】：Function not recognized by the new Vue Composition API

【发布时间】：2020-08-22 12:30:46

【问题描述】：

我们正在尝试转换一个简单的 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 不是一个函数。我在这里做错了什么？

【参考方案1】：

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

试试这个：

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