Vue 3 - watch方法未返回正确的值

Question

在Vue 3应用程序中，我正在引用store getter并监视其值的更改以执行某些逻辑。我需要比较旧值和新值。然而，我为每个传递给watch函数的参数获取相同的值。以下是我的设置：

<script>
import { useStore } from 'vuex'
import { watch } from 'vue'

export default {
  setup() {
    const store = useStore()
    let text = store.getters['SOME_ARRAY']
    
    watch(text, (text, prevText) => {
      console.log(text.length, prevText.length)
    })    
  }

   return { text }
}

</script>

在 console.log 中，两个长度都相同（即 3 3、4 4、5 5 等）。

- Riza Khan

Answer 1

text 应该在 getter 中使用 computed，以便在 watch 中引用时保持最新:

// let text = store.getters['SOME_ARRAY']
let text = computed(() => store.getters['SOME_ARRAY']) ✅

演示

- tony19

Answer 2

你能试试这个吗？

store.watch(() => store.getters['SOME_ARRAY'], (oldValue, newValue) => {
  console.log(oldValue)
  console.log(newValue)
})

- aligumustosun

---

这个怎么样？ - aligumustosun

据我所知，该商店没有“watch”属性。 - Riza Khan

嗯...学到了新东西。但它仍然不起作用 :) - Riza Khan