vue里实现增删改查

在Vue中实现增删改查

数据初始化

在Vue组件的data中定义初始数据和表单绑定的变量：

data() {
  return {
    items: [
      { id: 1, name: 'Item 1', description: 'Description 1' },
      { id: 2, name: 'Item 2', description: 'Description 2' }
    ],
    form: {
      id: null,
      name: '',
      description: ''
    },
    isEditing: false
  }
}

添加功能实现

创建方法处理表单提交，将新项添加到数组中：

methods: {
  addItem() {
    if (!this.form.name || !this.form.description) return

    const newItem = {
      id: Date.now(),
      name: this.form.name,
      description: this.form.description
    }
    this.items.push(newItem)
    this.resetForm()
  }
}

删除功能实现

通过数组过滤方法移除指定项：

deleteItem(id) {
  this.items = this.items.filter(item => item.id !== id)
}

编辑功能实现

设置编辑状态并填充表单数据：

editItem(item) {
  this.isEditing = true
  this.form = { ...item }
}

更新功能实现

修改现有项并重置表单状态：

updateItem() {
  const index = this.items.findIndex(item => item.id === this.form.id)
  if (index !== -1) {
    this.items.splice(index, 1, { ...this.form })
    this.resetForm()
    this.isEditing = false
  }
}

表单重置

清空表单数据的方法：

resetForm() {
  this.form = {
    id: null,
    name: '',
    description: ''
  }
}

模板示例

<template>
  <div>
    <form @submit.prevent="isEditing ? updateItem() : addItem()">
      <input v-model="form.name" placeholder="Name">
      <input v-model="form.description" placeholder="Description">
      <button type="submit">{{ isEditing ? 'Update' : 'Add' }}</button>
      <button v-if="isEditing" @click="resetForm">Cancel</button>
    </form>

    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }} - {{ item.description }}
        <button @click="editItem(item)">Edit</button>
        <button @click="deleteItem(item.id)">Delete</button>
      </li>
    </ul>
  </div>
</template>

使用Vuex管理状态

对于大型应用，建议使用Vuex集中管理状态：

// store.js
export default new Vuex.Store({
  state: {
    items: []
  },
  mutations: {
    ADD_ITEM(state, item) {
      state.items.push(item)
    },
    DELETE_ITEM(state, id) {
      state.items = state.items.filter(item => item.id !== id)
    },
    UPDATE_ITEM(state, updatedItem) {
      const index = state.items.findIndex(item => item.id === updatedItem.id)
      if (index !== -1) {
        state.items.splice(index, 1, updatedItem)
      }
    }
  },
  actions: {
    addItem({ commit }, item) {
      commit('ADD_ITEM', item)
    },
    deleteItem({ commit }, id) {
      commit('DELETE_ITEM', id)
    },
    updateItem({ commit }, item) {
      commit('UPDATE_ITEM', item)
    }
  }
})

使用axios进行API调用

结合后端API实现完整CRUD：

import axios from 'axios'

methods: {
  async fetchItems() {
    const response = await axios.get('/api/items')
    this.items = response.data
  },
  async addItem() {
    const response = await axios.post('/api/items', this.form)
    this.items.push(response.data)
    this.resetForm()
  },
  async deleteItem(id) {
    await axios.delete(`/api/items/${id}`)
    this.items = this.items.filter(item => item.id !== id)
  },
  async updateItem() {
    const response = await axios.put(`/api/items/${this.form.id}`, this.form)
    const index = this.items.findIndex(item => item.id === this.form.id)
    this.items.splice(index, 1, response.data)
    this.resetForm()
    this.isEditing = false
  }
}