vuex中watch的用法

在Vuex中，watcher可以用来监视store中的state和getter的变化，以便在这些变化发生时执行一些操作。watcher可以在store中定义，也可以在组件中定义。

在store中定义watcher，可以在store.js中引入Vue，并使用Vue的$watch方法来创建watcher。例如：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  },
  // 定义watcher
  watch: {
    'count': function (newValue, oldValue) {
      console.log('count changed from', oldValue, 'to', newValue)
    },
    'doubleCount': function (newValue, oldValue) {
      console.log('doubleCount changed from', oldValue, 'to', newValue)
    }
  }
})

export default store

在上面的例子中，watcher监视了state中的count和getter中的doubleCount的变化。当count或doubleCount发生变化时，watcher会自动执行定义的函数。

在组件中定义watcher，可以使用Vue组件中的$store.watch方法。例如：

export default {
  watch: {
    '$store.state.count': function (newValue, oldValue) {
      console.log('count changed from', oldValue, 'to', newValue)
    },
    '$store.getters.doubleCount': function (newValue, oldValue) {
      console.log('doubleCount changed from', oldValue, 'to', newValue)
    }
  }
}

在上面的例子中，watcher监视了store中的state中的count和getter中的doubleCount的变化。当count或doubleCount发生变化时，watcher会自动执行定义的函数。