Vue中如何基于Store数据动态维护可修改选中状态的数组？

我从Store中获取到如下数据：

let itemsData=[
  {id:1,data:[...]},
  {id:2,data:[...]},
  {id:3,data:[...]}
]

需要基于该数据生成格式如下的数组：

let itemsSelected=[
  {id:1,selected:false},
  {id:2,selected:false},
  {id:3,selected:false}
]

这个itemsSelected数组要用于模板中多个组件的状态判断，示例代码：

<div v-for="item in itemsSelected" :key="item.id" :class="item.selected?'selected':''"></div>

我原本想使用computed属性，但需要能动态修改itemsSelected中项的selected值，同时希望该数组能基于Store的itemsData构建，并且在itemsData变化时自动增删对应的项，该怎么实现？

组件内实现（单组件使用场景） #

computed属性是派生值，无法直接修改其返回对象的属性（修改后也不会触发响应式更新），因此需要把itemsSelected定义为组件的响应式数据，再通过监听itemsData的变化来同步数组的增删操作，同时保留已修改的选中状态。

具体操作步骤：

1. 在组件的data中初始化itemsSelected，基于Store的初始itemsData生成：

data() {
  return {
    itemsSelected: this.$store.state.itemsData.map(item => ({
      id: item.id,
      selected: false
    }))
  }
}

2. 添加watch监听itemsData的变化，同步更新itemsSelected：

watch: {
  '$store.state.itemsData': {
    deep: true,
    immediate: true,
    handler(newItems) {
      // 先缓存已有的选中状态
      const selectedCache = new Map(this.itemsSelected.map(item => [item.id, item.selected]))
      
      // 基于新的itemsData生成数组，复用之前的选中状态，无缓存则默认false
      this.itemsSelected = newItems.map(item => ({
        id: item.id,
        selected: selectedCache.get(item.id) ?? false
      }))
    }
  }
}

该方案的优势：

• itemsSelected是可直接修改的响应式数据，修改selected值会立即触发模板更新
• 当itemsData新增/删除项时，itemsSelected会自动同步，同时保留之前已修改的选中状态

Vuex全局方案（多组件共享状态场景） #

如果多个组件需要共用这个选中状态，直接将itemsSelected放到Vuex中管理会更高效：

1. 配置Store的state、mutations和actions：

const store = new Vuex.Store({
  state: {
    itemsData: [],
    itemsSelected: []
  },
  mutations: {
    // 更新itemsData并同步选中状态数组
    UPDATE_ITEMS_DATA(state, newData) {
      const selectedCache = new Map(state.itemsSelected.map(item => [item.id, item.selected]))
      state.itemsData = newData
      state.itemsSelected = newData.map(item => ({
        id: item.id,
        selected: selectedCache.get(item.id) ?? false
      }))
    },
    // 切换单个项的选中状态
    TOGGLE_SELECTED(state, itemId) {
      const targetItem = state.itemsSelected.find(item => item.id === itemId)
      if (targetItem) {
        targetItem.selected = !targetItem.selected
      }
    }
  },
  actions: {
    // 示例：从接口拉取数据并更新
    async fetchItems({ commit }) {
      const res = await api.getItemsList()
      commit('UPDATE_ITEMS_DATA', res.data)
    }
  }
})

2. 组件中调用使用：

import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['itemsSelected'])
  },
  methods: {
    ...mapMutations(['TOGGLE_SELECTED'])
  }
}

模板内的使用示例：

<div 
  v-for="item in itemsSelected" 
  :key="item.id" 
  :class="{ selected: item.selected }"
  @click="TOGGLE_SELECTED(item.id)"
></div>

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