用vue组件+vue路由+vuex+axios实现增删改查功能加注释

这里以一个简单的待办事项列表为例，实现增删改查功能。

1. 创建 Vue 组件

在 src/components 目录下创建 TodoList.vue 组件，代码如下：

<template>
  <div>
    <h2>待办事项列表</h2>
    <ul>
      <li v-for="(todo, index) in todos" :key="todo.id">
        {{ todo.text }}
        <button @click="deleteTodo(index)">删除</button>
      </li>
    </ul>
    <form @submit.prevent="addTodo">
      <input type="text" v-model="newTodoText" placeholder="添加新的待办事项">
      <button type="submit">添加</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [
        { id: 1, text: '学习 Vue.js' },
        { id: 2, text: '学习 Vuex' },
        { id: 3, text: '学习 Vue Router' }
      ],
      newTodoText: ''
    }
  },
  methods: {
    addTodo() {
      if (this.newTodoText.trim()) {
        const newTodo = {
          id: Date.now(),
          text: this.newTodoText.trim()
        }
        this.todos.push(newTodo)
        this.newTodoText = ''
      }
    },
    deleteTodo(index) {
      this.todos.splice(index, 1)
    }
  }
}
</script>

这是一个简单的待办事项列表组件，包含了待办事项的展示、添加和删除功能。todos 数组存储了待办事项列表，newTodoText 存储了新待办事项的文本。

2. 创建 Vue 路由

在 src/router/index.js 文件中创建路由，代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import TodoList from '../components/TodoList.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'TodoList',
    component: TodoList
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

这里只创建了一个路由，指向了 TodoList 组件。

3. 创建 Vuex Store

在 src/store/index.js 文件中创建 Vuex Store，代码如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '学习 Vue.js' },
      { id: 2, text: '学习 Vuex' },
      { id: 3, text: '学习 Vue Router' }
    ]
  },
  mutations: {
    addTodo (state, newTodoText) {
      if (newTodoText.trim()) {
        const newTodo = {
          id: Date.now(),
          text: newTodoText.trim()
        }
        state.todos.push(newTodo)
      }
    },
    deleteTodo (state, index) {
      state.todos.splice(index, 1)
    }
  },
  actions: {
    addTodo ({ commit }, newTodoText) {
      commit('addTodo', newTodoText)
    },
    deleteTodo ({ commit }, index) {
      commit('deleteTodo', index)
    }
  },
  getters: {
    todos: state => state.todos
  }
})

这里的 state 对象中存储了待办事项列表，mutations 中定义了添加和删除待办事项的方法，actions 中定义了对应的异步操作，getters 中定义了获取待办事项列表的方法。

4. 在组件中使用 Vuex

在 TodoList.vue 组件中使用 Vuex，代码如下：

<template>
  <div>
    <h2>待办事项列表</h2>
    <ul>
      <li v-for="(todo, index) in todos" :key="todo.id">
        {{ todo.text }}
        <button @click="deleteTodo(index)">删除</button>
      </li>
    </ul>
    <form @submit.prevent="addTodo">
      <input type="text" v-model="newTodoText" placeholder="添加新的待办事项">
      <button type="submit">添加</button>
    </form>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'todos'
    ])
  },
  data() {
    return {
      newTodoText: ''
    }
  },
  methods: {
    ...mapActions([
      'addTodo',
      'deleteTodo'
    ])
  }
}
</script>

这里使用了 Vuex 的辅助函数 mapGetters 和 mapActions，分别将 todos 数组和添加、删除待办事项的方法映射到组件的 computed 和 methods 中。

5. 使用 Axios 获取数据

在 src/services/todoService.js 文件中定义获取待办事项列表的方法，代码如下：

import axios from 'axios'

const API_URL = 'http://localhost:3000/todos'

export function getTodos() {
  return axios.get(API_URL)
    .then(response => response.data)
}

这里使用了 Axios 库发送 HTTP 请求，获取待办事项列表。

6. 在组件中使用 Axios 和 Vuex

在 TodoList.vue 组件中使用 Axios 和 Vuex，代码如下：

<template>
  <div>
    <h2>待办事项列表</h2>
    <ul>
      <li v-for="(todo, index) in todos" :key="todo.id">
        {{ todo.text }}
        <button @click="deleteTodo(index)">删除</button>
      </li>
    </ul>
    <form @submit.prevent="addTodo">
      <input type="text" v-model="newTodoText" placeholder="添加新的待办事项">
      <button type="submit">添加</button>
    </form>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { getTodos } from '../services/todoService'

export default {
  computed: {
    ...mapGetters([
      'todos'
    ])
  },
  data() {
    return {
      newTodoText: ''
    }
  },
  methods: {
    ...mapActions([
      'addTodo',
      'deleteTodo'
    ]),
    fetchTodos() {
      getTodos()
        .then(todos => {
          this.$store.commit('setTodos', todos)
        })
    }
  },
  created() {
    this.fetchTodos()
  }
}
</script>

这里新增了 fetchTodos 方法，使用了 getTodos 方法获取待办事项列表，并将列表提交到 Vuex Store 中。在组件的 created 生命周期中调用 fetchTodos 方法，实现页面初始加载时获取待办事项列表的功能。

7. 完成

至此，我们已经完成了一个简单的增删改查功能的待办事项列表应用。当用户打开应用时，页面会自动获取待办事项列表并展示出来。用户可以添加新的待办事项、删除已有的待办事项，并实时更新页面展示。