用vue实现简单的增删改查

封装一个增删改查的基本操作，在vue项目的src文件夹下再建一个文件夹untils,并在它下面新建一个js文件,名为db.js（可随便取名）

/**
 * 获取所有的数据
 */
export function getAllpeople () {
  var people = []
  if (localStorage.getItem('people')) {
    people = JSON.parse(localStorage.getItem('people'))
  }
  return people
}

/**
 * 保存，增
 * @param {*} person
 */
export function save (person) {
  var people = getAllpeople()
  people.push(person)
  localStorage.setItem('people', JSON.stringify(people))
}

/**
 * 根据id删除
 * @param {*} id
 */

export function deleteOne (id) {
  var people = getAllpeople()
  var index = people.findIndex(function (person) {
    return person.id === id
  })

  people.splice(index, 1)
  localStorage.setItem('people', JSON.stringify(people))
}

/**
 * 根据id修改数据
 * @param {*} id
 * @param {*} person
 */
export function update (id, person) {
  var people = getAllpeople()
  // 找到id符合条件的索引

  var index = people.findIndex(function (item) {
    return item.id === id
  })
  person.id = id * 1
  people[index] = person
  localStorage.setItem('people', JSON.stringify(people))
}

/**
 * 查询id符合条件的一条记录
 * @param {*} id
 */

export function findOne (id) {
  var people = getAllpeople()

  return people.find(function (item) {
    return item.id === id
  })
}

新建一个List.vue，列表页，用来展示数据，新增之后以及查询之后都在本页面显示。使用计算属性或者使watch监听，都能实现查询之后的数据展示。