VUE 3 - 手表不返回正确的值

Question

在 Vue 3 应用程序中，我正在引用商店 getter 并观察其值的变化以执行一些逻辑。

我需要比较新旧值。但是，我为传递给监视函数的每个参数获得了相同的值。

这是我的设置：

<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

你能试试这个吗？

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

Answer 2

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

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

demo

VUE 3 - 手表不返回正确的值

VUE 3 - watch not returning correct values

javascript

vue.js

vuejs3