programing

Vuex와의 양방향 바인딩

copyandpastes 2022. 7. 13. 21:16
반응형

Vuex와의 양방향 바인딩

Store Vuex에는 다음과 같은 상태 변수가 있습니다.

let state = {
    order: {
        payment_method: 'Credit card',
    }
};

export default state;

그러면 내 템플릿:

<select id="payment_method" class="w-full form-control form-select"
        v-model="order.payment_method">
    <option value="Credit Card">Credit Card</option>
    <option value="COD">COD</option>
</select>

선택 옵션을 변경할 때 내 상태는order갱신됩니다.하지만 Vuex 스토어 원칙을 읽었을 때 상태 값을 직접 업데이트하면 안 된다고 표시되었으므로 그렇게 해야 합니까?위 코드에서는 그렇게 하고 있습니까?

그렇지 않으면 선택 옵션에서 값을 어떻게 얻을 수 있습니까?

vuex 상태를 직접 조작해서는 안 됩니다.Vuex 작업, Vuex 돌연변이 및 Vuex Getters를 사용하여 상태를 작업할 수 있습니다.또한 구성 요소에서 계산된 속성을 사용하여 Vuex 상태 데이터를 안전하게 가져오거나 설정할 수 있습니다.

계산된 속성 사용

템플릿에서 계산된 속성을 사용하여 구체적으로 다음을 정의할 수 있습니다.get그리고.set스토어 로직을 랩하는 메서드.

<select v-model="paymentMethod">
    <option value="Credit Card">Credit Card</option>
    <option value="COD">COD</option>
</select>

{
  computed : {
    paymentMethod : {
      get() { return this.$store.getters.orderPaymentMethod },
      set(value) { return this.$store.commit('SET_ORDER_PAYMENT_METHOD', value)
    }
}

그런 다음 이 계산된 속성을 선택에 대한 v-모델로 사용합니다.v-model="paymentMethod"

스토어에 돌연변이 및 Getter 추가

export const SET_ORDER_PAYMENT_METHOD = 'SET_ORDER_PAYMENT_METHOD'
const store = new Vuex.Store({
  state: {
    order: {
      payment_method: 'Credit Card'
    }
  },
  mutations : {
    [SET_ORDER_PAYMENT_METHOD] (state, method) {
       /* optional value validation here */
       state.order.payment_method = method;
    }
  },
  getters: {
    orderPaymentMethod: state => {
      /* optional filtering or else, ... */
      return state.order.payment_method
    }
  }
})
  1. 돌연변이에 대한 자세한 내용은 https://vuex.vuejs.org/guide/mutations.html를 참조하십시오.
  2. Getters에 대한 자세한 내용은 https://vuex.vuejs.org/guide/getters.html를 참조하십시오.

언급URL : https://stackoverflow.com/questions/60298090/two-way-binding-with-vuex

반응형