저장소에서 값을 변경한 후 컴포넌트의 함수를 호출하는 방법은 무엇입니까?

저장소에서 값을 변경한 후 컴포넌트의 함수를 호출하는 방법은 무엇입니까?

저는 몇 가지 값과 두 가지 구성 요소를 가진 가게를 가지고 있습니다.첫 번째 컴포넌트는 레인지 슬라이더, 두 번째 컴포넌트는 빨간색 값이 변경된 후 함수를 호출해야 할 때 사용합니다.

첫 번째 구성 요소에서 슬라이더 값을 변경하고 vuex 저장소에 추가합니다.

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

어떻게 이해해야 하는지store.subscribe.watch.rgbColors.red또는store.watch.rgbColors.red맞습니까?

올바른 경우 값을 변경한 후 함수를 호출하려면 어떻게 해야 합니까?

store.subscribe변환자가 서브스크라이버 합니다.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에서 실제 워처를 사용하는 것은 보통 원하지 않습니다.Watch 를 사용할 필요가 있는 경우는, 자동적으로 떼어내 메모리 누전이나 이상한 에러가 발생하지 않게, 실제의 컴퍼넌트에 사용해 주세요.어느 경우든 스토어 모듈에 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>

언급URL : https://stackoverflow.com/questions/51342527/how-to-call-function-in-component-after-change-value-in-store