View array stored in Vuex in VueJS

Question

I have a list of clients, which is actually an array of objects. I store it in Vuex. I present a list in my component and each line has a checkbox. More precisely, I'm using keen-ui, and the checkbox rendering part looks like this:

<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>

Thus, the checkbox directly changes the array of clients, which is bad: I use strict mode in Vuex, and this causes an error.

I want to track when an array is changed, and call an action to change the state of vuex:

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

  deep: true
}

However, he is still directly changing the client. How can i fix this?

Answer 1

, .sync: 2.0.

: http://vuex.vuejs.org/en/forms.html, . , vuex 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;
    },
}

, , , , :)