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

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>