반응형
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
}
}
})
- 돌연변이에 대한 자세한 내용은 https://vuex.vuejs.org/guide/mutations.html를 참조하십시오.
- Getters에 대한 자세한 내용은 https://vuex.vuejs.org/guide/getters.html를 참조하십시오.
언급URL : https://stackoverflow.com/questions/60298090/two-way-binding-with-vuex
반응형
'programing' 카테고리의 다른 글
Vue.js에서 백엔드 API 데이터 값이 변경될 경우 프런트엔드를 자동으로 업데이트하려면 어떻게 해야 합니까? (0) | 2022.07.13 |
---|---|
VueJS jQuery: 상위 데이터 특성의 계산된 값이 정의되지 않았습니다. (0) | 2022.07.13 |
리프레시 시 Vuejs 루트 리다이렉트 (0) | 2022.07.13 |
Maven 저장소에서 Oracle JDBC 드라이버 찾기 (0) | 2022.07.08 |
C에서 다차원 배열을 함수 인수로 전달 (0) | 2022.07.08 |