vuex 操作数组

[huangshuwei]

前言

项目中使用状态管理器操作数组是很频繁的，找到最优的方案会让操作数组更便捷高效

新增数组某项

简单的往数组中新增。使用 push 插入

...
  state: {
             arr: [
                {name: 'a', id: 0}
            ]
        },
   mutations: {

       addArrayItem(state, {arrItem}) {

           state.arr.push(arrItem)
        }
   }
...

往数组中指定位置插入。使用 splice

...
  state: {
             arr: [
                {name: 'a', id: 0}
            ]
        },
   mutations: {

       addArrayItem(state, {index, arrItem}) {

             state.arr.splice(index, 0, arrItem)
       }
   }
...

修改数组某项

修改数组的某一项，splice 方案

...
  state: {
             arr: [
                {name: 'a', id: 0}
            ]
        },
   mutations: {

       updateArrayItem(state, {arrItem}) {

                const index = state.arr.findIndex(item => item.id === arrItem.id);
                state.arr.splice(index,1,arrItem)
          }
   }
...

修改数组的某一项，Vue.set 方案

...
  state: {
             arr: [
                {name: 'a', id: 0}
            ]
        },
   mutations: {

       updateArrayItem(state, {arrItem}) {

                const index = state.arr.findIndex(item => item.id === arrItem.id);
                Vue.set(state.arr, index, arrItem);
          }
   }
...

修改数组的某一项，Object.assign 方案

...
  state: {
             arr: [
                {name: 'a', id: 0}
            ]
        },
   mutations: {

       updateArrayItem(state, {arrItem}) {

                const item = state.arr.find(item=> item.id === arrItem.id);
                Object.assign(item, arrItem);
          }
   }
...

删除数组某项

删除数组的某一项，使用splice

...
  state: {
             arr: [
                {name: 'a', id: 0}
            ]
        },
   mutations: {

       removeArrayItem(state, {arrItem}) {

                const index = state.arr.findIndex(item => item.id === arrItem.id);
                state.arr.splice(index, 1)
          }
   }
...

未完，待续...

[TheProudSoul]

删除数组某项 应该是 findIndex，写成 find 了

[huangshuwei]

删除数组某项 应该是 findIndex，写成 find 了

是的，谢谢反馈