javascript - 在 VueJS 中查看存储在 Vuex 中的数组

Question

我有一个客户列表，它实际上是一个对象数组。我将它存储在 Vuex 中。我在我的组件中呈现列表，每一行都有一个复选框。更准确地说，我使用 keen-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 中使用严格模式，它会抛出一个错误。

我想跟踪数组何时更改并调用一个操作以更改 vuex 状态:

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

  deep: true
}

但是它仍然直接改变了客户。我该如何解决这个问题？

Answer 1

首先，使用 .sync 时要小心:它将在 2.0 中被弃用。

看看这个:http://vuex.vuejs.org/en/forms.html ，因为这个问题在这里解决了。基本上，此复选框应触发 input 或 change 上的 vuex 操作。摘自文档:

<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荣耀。