监视存储在VueJS的Vuex中的数组

z9smfwbn  于 2022-12-23  发布在  Vue.js
关注(0)|答案(4)|浏览(133)

我有一个客户列表,它实际上是一个对象数组,我将它存储在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
}

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

nnsrf1az

nnsrf1az1#

首先,使用.sync时要小心:它在2.0中将被弃用。
看看这个:http://vuex.vuejs.org/en/forms.html,因为这个问题在这里解决了。基本上,这个复选框应该在inputchange上触发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

k0pti3hp

k0pti3hp2#

您只需要定制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;
    },
}

我不太清楚你的商店是什么样子的,但希望这能给你一个想法:)

8oomwypt

8oomwypt3#

如果您的客户处于root状态,您可以尝试以下操作:

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

   deep: true
 }
}
a7qyws3x

a7qyws3x4#

试着在你的组件中使用mapState,并像你上面所做的那样观察客户。

相关问题