Vuex状态中结合v-model与v-for操作数组的实现方案

看起来你在实现可编辑标题的标签页时遇到了几个小问题，我来帮你修正一下：

问题分析 #

• 模板中v-model:value="tabs(tabIndex)"的写法不正确，tabs是数组，不能直接当作函数调用
• 计算属性scenes2的get/set方法参数不符合Vue规则：计算属性的get方法不接收参数，set方法仅接收更新后的value一个参数，无法直接获取tabIndex

修正方案 #

我们可以把计算属性改成返回函数的形式，让它能接收tabIndex参数，从而针对每个标签页单独处理标题的读写逻辑：

模板部分

<div class="tabs" v-for="(tab, tabIndex) in tabs" :key="tab.id" >
  <!-- 绑定到返回函数的计算属性，传入当前标签页索引 -->
  <input type="text" v-model="getTabTitle(tabIndex)">
</div>

计算属性部分

computed: {
  getTabTitle() {
    // 返回一个接收tabIndex的函数，为每个标签页生成独立的读写器
    return (tabIndex) => {
      return {
        // 自定义getter：根据索引获取对应tab的标题
        get: () => {
          return this.$store.state.tabs[tabIndex].title
        },
        // 自定义setter：更新标题时触发Vuex action
        set: (value) => {
          this.$store.dispatch('setTabTitle', { value, tabIndex })
        }
      }
    }
  }
}

补充Vuex配置示例

确保你的Vuex store中已经定义了对应的action和mutation：

// Vuex store/actions.js
actions: {
  setTabTitle({ commit }, payload) {
    commit('SET_TAB_TITLE', payload)
  }
}

// Vuex store/mutations.js
mutations: {
  SET_TAB_TITLE(state, { value, tabIndex }) {
    state.tabs[tabIndex].title = value
  }
}

这样修改后，用户就能在输入框中直接修改对应标签页的标题，并且更新会同步到Vuex状态中啦！

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