vuex中的watch

在 Vuex 中，可以使用 watch 来监听 state 中的变化。与 Vue 组件中的 watch 不同，Vuex 中的 watch 可以直接监听 state 中的变化，而不需要在组件中显式地引用 state。

可以使用 store.watch 方法来创建一个 watcher，这个 watcher 会在 state 中的指定属性发生变化时被调用。watch 方法接收两个参数：第一个参数是要监听的 state 属性的名称，第二个参数是一个回调函数，用来处理这个属性发生变化时的操作。

示例代码如下：

import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`count changed from ${oldValue} to ${newValue}`)
    }
  }
})

store.commit('increment') // count changed from 0 to 1

在上面的示例代码中，我们使用 watch 监听了 state 中的 count 属性，当 count 属性发生变化时，会调用回调函数，并输出变化前后的值。我们通过 store.commit('increment') 来手动触发 count 的变化，从而测试 watch 的效果。