用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监听，都能实现查询之后的数据展示。

新建一个Editor.vue用来增加和修改数据

路由设置，在router文件夹下的index.js中写下列代码。（创建vue脚手架的时候直接选上router）

import Vue from 'vue'
import VueRouter from 'vue-router'
import List from '../views/List.vue'
import Editor from '../views/Editor.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'list',
    component: List
  },
  {
    path: '/editor',
    name: 'editor',
    component: Editor
  }
]

const router = new VueRouter({
  routes
})

export default router