Vue 3 Composition API 使用功能时状态不更新

Question

我为此浪费了时间。我之前使用的是 Vue 3 选项 API，我正在尝试更改为 compostion API。我想将对象推送到数组，但 state 不更新值，为什么会这样？

<script>
 
export default {
  setup() {
    const state = reactive([])

    function myFunction() {
        state.push({'item':1})
        console.log(state); // state change
    }

    watchEffect(() => {
        console.log(state) // state doesn't change
    })
        
    return {
      myFunction
    }
  }
}

</script>

<template>
  <button @click="myFunction()">Click Here</button>
</template>

Answer 1

您的代码中存在语法错误。函数声明应为 function myFunction() { ... 而不是 function myFunction {...

在互联网上询问之前，请务必先检查浏览器控制台是否有任何错误...

const app = Vue.createApp({
  setup() {
    const state = Vue.reactive([])

    function myFunction() {
      state.push({
        'item': 1
      })
      console.log(state); // state change
    }

    Vue.watchEffect(() => {
      console.log(state) // state doesn't change
    })

    return {
      myFunction
    }
  }
})
app.mount("#app")

<script src="https://cdn.jsdelivr.net/npm/vue@3.2.26/dist/vue.global.min.js"></script>
<div id="app">
  <button @click="myFunction()">Click Here</button>
</div>

Vue 3 Composition API 使用功能时状态不更新

Vue 3 Composition API state not updating when use function

javascript

vuejs3