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

Question

我有一个包含一些值和两个组件的商店。当我需要在更改红色值后调用函数时，第一个组件是它的范围滑块，第二个组件是它的组件。

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

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

我怎么理解我需要使用store.subscribe.watch.rgbColors.redor store.watch.rgbColors.red，它是正确的？

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

标签： javascriptvue.jsvuejs2vuex

Answer 1

store.subscribe订阅突变器。Ala：如果您调用this.$store.commit('myMutator', payload)，您的订阅者函数将使用myMutatorand调用payload。这不是你想要的。

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

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

// And sometime later
unWatchFn()

---

您通常不想在 Vue 中使用实际的观察者，因为通过计算属性计算事物会自动使计算变量保持最新。如果您需要使用观察程序，请在实际组件上使用它们，以便它们自动被删除，并且不会导致内存泄漏或奇怪的错误。无论哪种情况，您都需要在 store 模块中创建一个 getter。然后在这个 getter 上的组件中创建一个计算属性或一个观察者。

// 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>