blog
blog copied to clipboard
Published
20 hours ago •
huangshuwei
huangshuwei
vuex 操作数组
前言
项目中使用状态管理器操作数组是很频繁的，找到最优的方案会让操作数组更便捷高效
新增数组某项
简单的往数组中新增。使用 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)
}
}
...
