如何在v-for循环场景下通过v-model输入更新Vuex Store

没问题，这事儿我熟！咱们一步步来实现你要的功能——遍历数组展示输入框，并且每次输入变化时触发Vuex的mutation更新状态。

核心思路 #

因为Vuex要求状态只能通过mutation修改，不能直接在组件里修改state中的数据，所以我们不能直接用v-model绑定Vuex里的policy.text（那样会直接修改state，违反单向数据流原则）。正确的做法是：用:value绑定输入框的显示值，监听输入框的input事件，在事件处理函数里提交mutation来更新状态。

完整代码示例 #

1. Vue组件部分

<template>
  <div class="policy-container">
    <!-- 遍历policies数组，注意添加唯一key -->
    <div v-for="(policy, index) in policies" :key="index" class="policy-item">
      <span>{{ policy.name.toUpperCase() }}:</span>
      <!-- 用:value绑定显示值，@input监听输入变化 -->
      <input 
        type="text" 
        :value="policy.text" 
        @input="handleTextChange(index, $event.target.value)"
        class="policy-input"
      />
    </div>
  </div>
</template>

<script>
// 引入Vuex的mapMutations辅助函数
import { mapMutations } from 'vuex'

export default {
  name: 'PolicyEditor',
  computed: {
    // 从Vuex state中获取policies数组
    policies() {
      return this.$store.state.policies
    }
  },
  methods: {
    // 映射Vuex的mutation到组件方法
    ...mapMutations(['UPDATE_POLICY_TEXT']),
    // 处理输入框变化的方法
    handleTextChange(index, newText) {
      // 提交mutation，传递索引和新文本值
      this.UPDATE_POLICY_TEXT({ index, newText })
    }
  }
}
</script>

<style scoped>
.policy-item {
  margin: 10px 0;
}
.policy-input {
  margin-left: 8px;
  padding: 4px;
}
</style>

2. Vuex Store部分

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 初始化你的10个policy对象数组
    policies: [
      { name: 'a', text: '' },
      { name: 'b', text: '' },
      { name: 'c', text: '' },
      // 这里补充剩下的7个对象...
    ]
  },
  mutations: {
    // 定义更新policy文本的mutation
    UPDATE_POLICY_TEXT(state, payload) {
      // 方式1：直接修改对应索引的policy的text（简单直接，Vue能检测到变化）
      state.policies[payload.index].text = payload.newText

      // 方式2：创建新数组（更符合不可变数据原则，推荐用于复杂场景）
      // state.policies = state.policies.map((policy, i) => {
      //   if (i === payload.index) {
      //     return { ...policy, text: payload.newText }
      //   }
      //   return policy
      // })
    }
  }
})

关键细节说明 #

• 为什么不用v-model？：直接用v-model="policy.text"会直接修改Vuex state中的数据，这不符合Vuex的状态管理规范，所有state的修改都应该通过mutation来完成，这样能保证状态变化可追踪、可调试。
• 两种mutation更新方式：方式1适合简单场景，Vue对数组元素的属性修改有响应式支持；方式2通过创建新数组来更新，遵循不可变数据模式，在需要监听数组整体变化的场景下更可靠。
• mapMutations辅助函数：它能帮我们简化mutation的调用，不用每次写this.$store.commit('UPDATE_POLICY_TEXT', ...)，让代码更简洁。

内容的提问来源于stack exchange，提问作者Pavan