用vue组件+vue路由+vuex+axios实现增删改查

好的，下面是一个简单的示例：

首先，安装需要的依赖：

npm install vue vue-router vuex axios

然后，在src目录下，创建以下文件：

1. `api.js`：定义与后端交互的API请求。
2. `store.js`：定义Vuex状态管理器。
3. `router.js`：定义Vue路由器。
4. `views`目录：定义Vue组件。

`api.js`文件内容如下：

import axios from 'axios';

const baseUrl = 'http://localhost:3000'; // 后端API地址
const api = axios.create({
  baseURL: baseUrl,
  timeout: 10000,
});

export default {
  async getTodos() {
    const response = await api.get('/todos');
    return response.data;
  },

  async addTodo(todo) {
    const response = await api.post('/todos', todo);
    return response.data;
  },

  async updateTodo(todo) {
    const response = await api.put(`/todos/${todo.id}`, todo);
    return response.data;
  },

  async deleteTodoById(id) {
    const response = await api.delete(`/todos/${id}`);
    return response.data;
  },
};

`store.js`文件内容如下：

import Vue from 'vue';
import Vuex from 'vuex';
import api from './api';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    todos: [],
  },
  mutations: {
    setTodos(state, todos) {
      state.todos = todos;
    },

    addTodo: (state, todo) => {
      state.todos.push(todo);
    },

    updateTodo: (state, todo) => {
      const index = state.todos.findIndex((t) => t.id === todo.id);
      Vue.set(state.todos, index, todo);
    },

    deleteTodoById: (state, id) => {
      const index = state.todos.findIndex((t) => t.id === id);
      state.todos.splice(index, 1);
    },
  },
  actions: {
    async fetchTodos({ commit }) {
      const todos = await api.getTodos();
      commit('setTodos', todos);
    },

    async addTodo({ commit }, todo) {
      const newTodo = await api.addTodo(todo);
      commit('addTodo', newTodo);
    },

    async updateTodoById({ commit }, todo) {
      const updatedTodo = await api.updateTodo(todo);
      commit('updateTodo', updatedTodo);
    },

    async deleteTodoById({ commit }, id) {
      await api.deleteTodoById(id);
      commit('deleteTodoById', id);
    },
  },
});

`router.js`文件内容如下：

import Vue from 'vue';
import VueRouter from 'vue-router';
import TodoList from './views/TodoList.vue';
import AddTodo from './views/AddTodo.vue';
import EditTodo from './views/EditTodo.vue';

Vue.use(VueRouter);

export default new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: TodoList,
    },
    {
      path: '/add',
      name: 'add',
      component: AddTodo,
    },
    {
      path: '/edit/:id',
      name: 'edit',
      component: EditTodo,
    },
  ],
});

最后，`views`目录下的组件分别为：

1. `TodoList.vue`：展示所有待办事项。
2. `AddTodo.vue`：添加新待办事项。
3. `EditTodo.vue`：编辑已有待办事项。

`TodoList.vue`文件内容如下：

<template>
  <div>
    <h1>Todo List</h1>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.title }} - {{ todo.completed ? 'Completed' : 'Not Completed' }}
        <router-link :to="{ name: 'edit', params: { id: todo.id }}">Edit</router-link>
        <button @click="deleteTodoById(todo.id)">Delete</button>
      </li>
    </ul>
    <router-link :to="{ name: 'add' }">Add Todo</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [],
    };
  },

  async mounted() {
    await this.$store.dispatch('fetchTodos');
    this.todos = this.$store.state.todos;
  },

  methods: {
    async deleteTodoById(id) {
      await this.$store.dispatch('deleteTodoById', id);
    },
  },
};
</script>

`AddTodo.vue`文件内容如下：

<template>
  <div>
    <h1>Add Todo</h1>
    <form @submit.prevent="addTodo">
      <label for="title">Title:</label>
      <input type="text" id="title" v-model="title" required />
      <br />
      <label for="completed">Completed:</label>
      <input type="checkbox" id="completed" v-model="completed" />
      <br />
      <button type="submit">Add</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      completed: false,
    };
  },

  methods: {
    async addTodo() {
      const todo = {
        title: this.title,
        completed: this.completed,
      };
      await this.$store.dispatch('addTodo', todo);
      this.$router.push('/');
    },
  },
};
</script>

`EditTodo.vue`文件内容如下：

<template>
  <div>
    <h1>Edit Todo</h1>
    <form @submit.prevent="updateTodo">
      <label for="title">Title:</label>
      <input type="text" id="title" v-model="todo.title" required />
      <br />
      <label for="completed">Completed:</label>
      <input type="checkbox" id="completed" v-model="todo.completed" />
      <br />
      <button type="submit">Save</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todo: {},
    };
  },

  async mounted() {
    const id = this.$route.params.id;
    const todos = this.$store.state.todos;
    this.todo = todos.find((t) => t.id === Number(id)) || {};
  },

  methods: {
    async updateTodo() {
      await this.$store.dispatch('updateTodoById', this.todo);
      this.$router.push('/');
    },
  },
};
</script>

到此为止，使用Vue组件+Vue路由+Vuex+Axios实现增删改查的示例完成了。