VueJS의 Vuex에 저장된 배열보기

Question

고객 목록은 실제로 객체의 배열입니다. Vuex에 보관합니다. 구성 요소에 목록을 렌더링하고 각 행에는 확인란이 있습니다. 더 정확하게 나는 예리한 UI를 사용하고 같은 부분을 렌더링 확인란 같습니다

<tr v-for="customer in customers" :class="{ selected: customer.selected }"> 
    <td> 
     <ui-checkbox :value.sync="customer.selected"></ui-checkbox> 
    </td> 
    <td>{{ customer.name }}</td> 
    <td>{{ customer.email }}</td> 
</tr> 

그래서 체크 박스가 직접 나쁜 고객 배열 변경 : 나는 Vuex에 엄격 모드를 사용하고 그것은 나에게 오류가 발생합니다. 여전히 직접 고객을 변경하지만

watch: { 
'customers': { 
    handler() { 
    // ... 
    }, 

    deep: true 
} 

:

은 내가 vuex 상태를 변경하기 위해 조치를 배열이 변경 될 때 추적하고 전화를합니다. 이 문제를 어떻게 해결할 수 있습니까?

Answer 1

우선 .sync을 사용할 때주의하십시오 : 2.0에서는 더 이상 사용되지 않습니다.

여기에서이 문제를 해결하면 http://vuex.vuejs.org/en/forms.html을 살펴보십시오. 기본적으로이 확인란을 사용하면 액션이 input 또는 change에 트리거됩니다. 워드 프로세서에서 촬영 :

<input :value="message" @input="updateMessage"> 

을 updateMessage은 여기서 당신이 변이를 추적하지 않으려면

vuex: { 
    getters: { 
    message: state => state.obj.message 
    }, 
    actions: { 
    updateMessage: ({ dispatch }, e) => { 
     dispatch('UPDATE_MESSAGE', e.target.value) 
    } 
    } 
} 

, 당신은, vuex에서 멀리이 구성 요소의 상태를 이동할 수 있습니다 사용할 수 있도록 v-model 모든 영광으로.

Answer 2

당신은 단지 사용자 정의 getter 및 setter 확인해야합니다 : 상점에서

<template> 
    <ui-checkbox :value.sync="thisCustomer"></ui-checkbox> 
</template> 

<script> 
    //this is using vuex 2.0 syntax 
    export default { 
     thisCustomer: { 
      get() { 
       return this.$store.state.customer; 
      }, 
      set(val) { 
       this.$store.commit('SET_CUSTOMER', val); 
       // instead of performing the mutation here, 
       // you could also use an action: 
        // this.$store.disptach('updateCustomer') 
      } 
     }, 
    } 
</script> 

:

import { 
    SET_CUSTOMER, 
} from '../mutation-types'; 

const state = { 
    customer: null, 
}; 

const mutations = { 
    [SET_CUSTOMER](state, value) { 
     state.customer = value; 
    }, 
} 

나는 당신의 가게가 어떻게 생겼는지 정확히 모르겠지만, 희망이 당신을 제공을 생각 :