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でstrictモードを使用して、それは誤り私をスローします。

私は配列が変更されたときに追跡し、vuex状態を変更するためにアクションを呼び出したい：

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

    deep: true 
} 

それはまだ直接顧客に変更が。これをどうすれば解決できますか？

Answer 1

.syncを使用する場合はまず注意が必要です.2.0では非推奨になります。

http://vuex.vuejs.org/en/forms.htmlをご覧ください。この問題はここで解決されています。基本的には、このチェックボックスは、またはchangeでvuexアクションをトリガーする必要があります。ドキュメントから撮影：あなたが変異を追跡したくない場合は

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

、あなたが使用できるようにするには、離れてvuexから、このコンポーネントの状態を移動することができますupdateMessageがある

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

v-modelのすべての栄光です。

Answer 2

あなただけのカスタムゲッターとセッターを行う必要があります。

お店で

<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; 
    }, 
} 

私はあなたの店がどのように見えるかを正確にわからないんだけど、うまくいけば、これはあなたを与えますアイデア：