Vuejs : mapMutations

Vuejs : mapMutations

나는 Vues.js에 초보자인데 mapMutation 방법에 대해 물어보고 있어.나는 이 방법으로 매개 변수를 전달하고 싶은데 방법을 모르겠어.mapMution을 사용하여 두 가지 방법을 변환하고 싶다.

increment() {
   this.$store.commit(M_COUNT_INCREMENT, {
      amount: 1,
   });
},
decrement() {
   this.$store.commit(M_COUNT_DECREMENT, {
       amount: 1,
   });
},

내 "금액" 매개변수를 전달하여 다음과 같은 작업을 수행하십시오.

...mapMutations({
   increment: M_COUNT_INCREMENT,
   decrement: M_COUNT_DECREMENT,
}),

감 잡히는 게 없어요?

고맙다

물론 그렇게 할 수 있다!당신은 많은 변수들을 돌연변이에게 전달할 수 있다.상황에 맞게 데이터를 조정해야 하지만, 이렇게 하면 된다.

VUEX 저장소 개체 내의 돌연변이:

mutations: {
  increment (state, newValue) {
    state.counter = state.counter + newValue;
  },
  decrement (state, newValue) {
    state.counter = state.counter - newValue;
  }
}

Vue Methods(계산되지 않음):

...mapMutations(['increment', 'decrement'])

돌연변이 매핑이 있는 새 세터:

this.increment(this.yourNumber); // Value 1 in your example

바로 그거야!

보너스! 값 쌍을 가진 돌연변이 함수에 많은 변수(페이로드)를 전달할 수 있다. 예를 들어,

this.increment({
  id: this.counterId,
  newValue: this.newValue
});

보너스2! 그리고 당신의 돌연변이는 약간 변해야 한다.

 mutations: {
  increment (state, payload) {
  state.selectedCounter[payload.id].counter = payload.newValue;
 }
}

대단해?법의학 문서를 읽어 보십시오! https://vuex.vuejs.org/guide/mutations.html

본질적으로 당신이 시도하고 있는 것은 페이로드에 대한 논쟁으로 돌연변이를 치료하는 것이다.

그것은 mapMutions()로는 가능하지 않다. map Mutions는 단지 돌연변이를 방법 1:1로 매핑할 뿐이다.

따라서 이러한 경우 초기 방법을 사용해야 할 것이다.링크에서 나온 답: https://forum.vuejs.org/t/vuex-mapmutations/2455/3

2021년 Vue 3에서 당신의 파라미터는 이미 통과되고 있다.

단지 올바른 방법으로 코드를 호출/사용하는 것이다.

increment() {
   this.$store.commit(M_COUNT_INCREMENT, {
      amount: 1,
   });
},
decrement() {
   this.$store.commit(M_COUNT_DECREMENT, {
       amount: 1,
   });
},

mapMutations로 전환:

methods: {
    ...mapMutations([M_COUNT_INCREMENT,M_COUNT_DECREMENT]),
  },

그런 다음 템플릿 또는 스크립트에서 증분() 또는 감소()를 사용한 경우:

사용:

M_COUNT_INCREMENT(payload)
M_COUNT_DECREMENT(payload)

자세한 내용은 https://next.vuex.vuejs.org/guide/mutations.html#committing-mutations-in-components를 참조하십시오.

다른 매개체가 필요 없는 돌연변이를 만들어서 이렇게 할 수 있다.

const state = {value : 0}

// In your mutations
increment(state){
   state.value += 1
},

decrement(state){
   state.value -= 1
},

// In your app
this.$store.commit('increment')
this.$store.commit('decrement')

이렇게 하는 또 다른 방법은 원래 돌연변이를 유지하는 것이지만, 그 주위에 행동을 가명으로 사용하는 것이지만, 나는 이것이 일을 하는 'vuex' 방식이라고 생각하지 않는다.

this.DECREMENT({minus: 2})야기할 것이다this.$store.commit('DECREMENT', obj). 로컬에서 사용methods: increment()app.vue

<template>
      <div id="app">
        <p>{{count}}</p>
        <button @click="INCREMENT">+</button>
        <button @click="decrement">-</button>
      </div>
    </template>

    <script>
    import { mapMutations } from "vuex";
    import { mapState } from "vuex";

    export default {
      computed: mapState(["count"]),

      methods: {
        decrement() {
          this.DECREMENT({ minus: 2 })
        },

        ...mapMutations(["INCREMENT", "DECREMENT"])
      }
    };
    </script>

store.js.

export const store = () => {
  return new Vuex.Store({
    state: {
      count: 0,
    },

    mutations: {

      INCREMENT (state) {
        state.count++;
      },

      DECREMENT (state, obj) {
        state.count -= obj.minus;
      }
    },
};

참조URL: https://stackoverflow.com/questions/40377248/vuejs-mapmutations