9

我有一个客户列表，它实际上是一个对象数组。我将它存储在 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 中使用严格模式，它会抛出一个错误。

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

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

  deep: true
}

然而，它仍然直接改变了客户。我怎样才能解决这个问题？

4

3 回答 3

0

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

看看这个： http: //vuex.vuejs.org/en/forms.html，因为这个问题在这里解决了。基本上，此复选框应触发vuex对inputor的操作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它。

于 2016-08-10T23:37:55.917 回答
0

你只需要制作一个自定义的 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;
    },
}

我不确定你的商店是什么样子，但希望这能给你一个想法:)

于 2016-11-12T00:52:18.900 回答
0

如果您的客户处于根状态，您可以尝试以下操作：

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

   deep: true
 }
}
于 2021-12-01T16:54:10.080 回答