VUE 3 - 观察不返回正确的值

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...）。

Answer 1

text 应该在 getter 上使用 computed，以便它在 watch 中的引用保持最新：

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

demo

Answer 2

你可以试试这个吗？

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