更改存储值后如何调用组件中的函数？

Question

我有一个具有一些值和两个组成部分的商店。 更改红色值后需要调用函数时，第一个组件是范围滑块，第二个组件是组件。

在第一个组件中，我更改滑块值并将其添加到vuex存储中。

state: {
    value: 0,
      rgbColors: {
        red: 0
      }
  },

我如何理解我需要使用store.subscribe.watch.rgbColors.red或store.watch.rgbColors.red，这是正确的吗？

如果正确，更改值后如何调用某些函数？

Answer 1

store.subscribe订阅了mutators。 Ala：如果调用this.$store.commit('myMutator', payload)，则将用myMutator和payload来调用您的订户函数。这不是你想要的。

store.watch将监视您定义的状态的某些部分，但主要缺点是您需要手动取消监视。我相信您会这样使用它：

const unWatchFn = store.watch(
  (state) => state.rgbColors.red,
  (newRed) => {
    console.log(newRed)
  }
);

// And sometime later
unWatchFn()

---

您通常不希望在Vue中使用实际的观察者，因为通过计算属性自动计算事物可以使计算变量保持最新。如果需要使用观察程序，请在实际的组件上使用它们，以使它们自动删除，并且不会引起内存泄漏或奇怪的错误。无论哪种情况，您都需要在商店模块中进行吸气。然后，在此吸气剂中的组件中创建计算属性或观察者。

// store.js
export default {
  state: {
    rgbColors: {
      red: 0,
      green: 0,
      blue: 0
    }
  },

  getters: {
    color(state) {
      return state.rgbColors;
    }
  },

  mutations: {
    setColor(state, { red, green, blue }) {
      state.rgbColors.red = red;
      state.rgbColors.green = green;
      state.rgbColors.blue = blue;
    }
  }
};

// SomeComponent.vue
<script>
import { mapGetters } from "vuex";

export default {
  name: "App",

  computed: {
    ...mapGetters(["color"]),

    styling() {
      const { red, green, blue } = this.color;

      return {
        "background-color": `rgb(${red}, ${green}, ${blue})`
      };
    }
  },

  watch: {
    color: {
      deep: true,
      handler(newColor) {
        console.log("Oh, look, a new color!", newColor);
      }
    }
  },

  methods: {
    setColor(red, green, blue) {
      this.$store.commit("setColor", {
        red,
        green,
        blue
      });
    }
  }
};
</script>