如何在 vuex 存储中的 v-for 中改变数组？

Question

我在 v-for 中有一个 v-model。 v-model 在组件上更新，但不在 store/state 中更新。我正在努力寻找一个远离这个的地方。我已经阅读了有关 vuex 和数组的各种文章，但我正在努力将代码应用于我的问题。这是我第一次真正在野外使用 vuex，非常感谢任何帮助。

selectedPassengerCount[i] 是我要更新的部分

在我的组件中

      <li v-for="(passengertype, i) in passengertypes" :key="i">
        <span>{{ passengertype.type }}</span>
        <div class="passenger-count__container">
          <button>-</button>
          <input type="number" min="1" v-model="selectedPassengerCount[i]" />
          <button>+</button>
        </div>
      </li>

  computed: {
    passengertypes() {
      return this.$store.state.passengertypes;
    },

    selectedPassengerCount: {
      get() {
        return this.$store.state.selectedPassengerCount;
      },
      set(value) {
        this.$store.commit("updateSelectedPassengerCount", value);
      },
    },
  },

我在店里有


  state: {
    passengertypes: [
      {
        type: "a"
      },
      {
        type: "b"
      },
      {
        type: "c"
      }
    ],
     selectedPassengerCount: []
  }

  mutations: {
   updateSelectedPassengerCount(state, selectedPassengerCount) {
      state.selectedPassengerCount = selectedPassengerCount;
    },
  },

Answer 1

您的代码的问题在于 selectedPassengerCount setter 只有在 selectedPassengerCount 被分配新值（数组）时才会被调用。

The v-model updates on the component but not in store/state

我真的很怀疑这一点。实际上，您的代码直接改变了存储在 Vuex 中的数组（通过 v-model），而不执行任何改变。您可以使用 Strict mode 检查这一点 - 当激活时，您的代码应该在控制台中抛出错误....

解决方法是分解 v-model:

<button @click.prevent="updatePassangerCount(i, selectedPassengerCount[i] - 1)"  :disabled="selectedPassengerCount[i] === 1"> - </button>
<input type="number" min="1" :value="selectedPassengerCount[i]" @input="updatePassangerCount(i, $event.target.value)" />
<button @click.prevent="updatePassangerCount(i, selectedPassengerCount[i] + 1)"> + </button>

methods: {
  updatePassangerCount(index, value) {
    const newArray = [...this.selectedPassengerCount]
    newArray[index] = parseInt(value)  // value from input is always string
    this.$store.commit("updateSelectedPassengerCount", newArray); 
    // or create a new mutation with (index, value) arguments
  }
}

如何在 vuex 存储中的 v-for 中改变数组？

how to mutate an array inside a v-for in vuex store?

vuex

v-for