How to watch store values from vuex

在Vue中，如果想要通过watch监听Vuex中存储的值，你可以使用计算属性(computed properties)结合侦听器(watchers)来实现。Vuex的状态变化是响应式的，这意味着你可以简单地在计算属性中返回Vuex的状态，并在watch选项中侦听这个计算属性的变化。

以下是一个具体的例子：

假设你有一个Vuex store，里面存有一个状态叫做count。

javascript
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

你想要在Vue组件中监听count值的变化。你可以这样做：

javascript
new Vue({
  el: '#app',
  store,
  computed: {
    // 使用计算属性来获取Vuex里的状态
    count() {
      return this.$store.state.count;
    }
  },
  watch: {
    // 使用侦听器来监听计算属性的变化
    count(newVal, oldVal) {
      console.log(`count值从${oldVal}变化到${newVal}`);
      // 这里可以根据count值的变化执行一些操作
    }
  }
});

在这个例子中，计算属性count用来从Vuex获取当前的count状态。然后，我们在组件的watch选项中定义了一个count侦听器，该侦听器将会在计算属性count的值变化时触发。这样，每当通过Vuex的mutation改变count状态时，计算属性会自动更新，进而触发侦听器中的回调函数。

此外，如果你想要深度监听一个对象的属性变化，可以在watch选项中设置deep: true，但对于大多数监听单一值的场景，如上述的count，这是不必要的。

举例来说，您有一篮子水果，每次从篮子中添加或删除水果时，您希望 (1) 显示有关水果数量的信息，但您还 (2) 希望收到以下通知以某种奇特的方式计算水果的数量......

水果计数组件.vue

shell
<template>
  <!-- We meet our first objective (1) by simply -->
  <!-- binding to the count property. -->
  <p>Fruits: {{ count }}</p>
</template>

<script>
import basket from '../resources/fruit-basket'

export default () {
  computed: {
    count () {
      return basket.state.fruits.length
      // Or return basket.getters.fruitsCount
      // (depends on your design decisions).
    }
  },
  watch: {
    count (newCount, oldCount) {
      // Our fancy notification (2).
      console.log(`We have ${newCount} fruits now, yay!`)
    }
  }
}
</script>

请注意，对象中函数的名称watch必须与对象中函数的名称匹配computed。在上面的示例中，名称是count。

监视属性的新值和旧值将作为参数传递给监视回调（计数函数）。

篮子店可能看起来像这样：

水果篮.js

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

Vue.use(Vuex)

const basket = new Vuex.Store({
  state: {
    fruits: []
  },
  getters: {
    fruitsCount (state) {
      return state.fruits.length
    }
  }
  // Obviously you would need some mutations and actions,
  // but to make example cleaner I'll skip this part.
})

export default basket

您可以在以下资源中阅读更多内容：

• 计算属性和观察者
• API 文档：计算的
• API 文档：观看

很简单：

shell
watch: {
  '$store.state.drawer': function() {
    console.log(this.$store.state.drawer)
  }
}

如果商店位于模块中，请使用：

shell
'$store.state.myModule.drawer'

对于嵌套文件，请使用：

shell
'$store.state.fileOne.fileTwo.myModule.drawer'

您不应该使用组件的观察者来监听状态更改。我建议您使用 getters 函数，然后将它们映射到您的组件中。

shell
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      myState: 'getMyState'
    })
  }
}

在您的商店中：

shell
const getters = {
  getMyState: state => state.my_state
}

您应该能够通过this.myState在组件中使用来监听对商店所做的任何更改。

https://vuex.vuejs.org/en/getters.html#the-mapgetters-helper

如上所述，直接在商店中查看变化并不是一个好主意

但在一些非常罕见的情况下，它可能对某人有用，所以我会留下这个答案。其他情况请参阅@gabriel-robert 的回答

您可以通过state.$watch. 将其添加到created组件中的（或需要执行此操作的位置）方法中

shell
this.$store.watch(
    function (state) {
        return state.my_state;
    },
    function () {
        //do something on data change
    },
    {
        deep: true //add this if u need to watch object properties change etc.
    }
);

更多详细信息： https: //vuex.vuejs.org/api/#watch

我认为提问者想将 watch 与 Vuex 一起使用。

shell
this.$store.watch(
      (state)=>{
        return this.$store.getters.your_getter
      },
      (val)=>{
       //something changed do something

      },
      {
        deep:true
      }
      );