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

好的，我可以为你提供一个简单的示例代码，用于展示如何使用Vue组件化、Vue路由、Vuex和Axios来实现增删改查功能。

首先，我们需要安装Vue、Vue Router、Vuex和Axios，你可以使用npm或yarn来安装它们。

接下来，我们创建一个Vue组件，用于显示数据列表和执行增删改查操作。在这个组件中，我们将使用Vuex来管理数据状态和执行异步操作，使用Axios来进行HTTP请求。

<template>
  <div>
    <h1>Todo List</h1>
    <form @submit.prevent="addTodo">
      <input v-model="newTodo" placeholder="Add new todo" />
      <button type="submit">Add</button>
    </form>
    <ul>
      <li v-for="(todo, index) in todos" :key="todo.id">
        <input type="checkbox" :checked="todo.completed" @change="toggleTodo(todo)" />
        <span>{{ todo.text }}</span>
        <button @click="removeTodo(index)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
export default {
  computed: {
    ...mapGetters(['todos']),
  },
  methods: {
    ...mapActions(['addTodo', 'removeTodo', 'toggleTodo']),
  },
  data() {
    return {
      newTodo: '',
    };
  },
};
</script>

接下来，我们使用Vue Router来创建路由和路由组件，用于在不同的URL路径下显示不同的组件。在这个例子中，我们将创建一个路由，用于显示TodoList组件。

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

Vue.use(VueRouter);

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

const router = new VueRouter({
  mode: 'history',
  routes,
});

export default router;

最后，我们使用Vuex来管理TodoList组件的状态和操作。我们将创建一个store对象，包含state、mutations、actions和getters。

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    todos: [],
  },
  mutations: {
    SET_TODOS(state, todos) {
      state.todos = todos;
    },
    ADD_TODO(state, todo) {
      state.todos.push(todo);
    },
    REMOVE_TODO(state, index) {
      state.todos.splice(index, 1);
    },
    TOGGLE_TODO(state, todo) {
      todo.completed = !todo.completed;
    },
  },
  actions: {
    async fetchTodos({ commit }) {
      const response = await axios.get('/api/todos');
      commit('SET_TODOS', response.data);
    },
    async addTodo({ commit }, text) {
      const response = await axios.post('/api/todos', { text, completed: false });
      commit('ADD_TODO', response.data);
    },
    async removeTodo({ commit }, index) {
      await axios.delete(`/api/todos/${state.todos[index].id}`);
      commit('REMOVE_TODO', index);
    },
    async toggleTodo({ commit }, todo) {
      await axios.patch(`/api/todos/${todo.id}`, { completed: !todo.completed });
      commit('TOGGLE_TODO', todo);
    },
  },
  getters: {
    todos: state => state.todos,
  },
});

export default store;

现在我们已经完成了使用Vue组件化、Vue路由、Vuex和Axios实现增删改查功能的示例代码。当然，这只是一个简单的示例，你可以根据自己的需求进行修改和扩展。