vue组件化+vue路由+vuex+axios实现增删改查功能

好的，下面是一个完整的示例代码，以供参考：

1. 安装必要的依赖

npm install vue vue-router vuex axios --save

2. 创建一个Vue组件，例如UserList.vue，实现用户列表展示、删除等功能

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in userList" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.age }}</td>
          <td>
            <button @click="deleteUser(user.id)">删除</button>
            <router-link :to="{ name: 'EditUser', params: { id: user.id }}">编辑</router-link>
          </td>
        </tr>
      </tbody>
    </table>
    <router-link :to="{ name: 'AddUser' }">添加用户</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: [],
    };
  },
  methods: {
    async deleteUser(id) {
      let res = await this.$axios.delete(`/api/users/${id}`);
      if (res.data.code === 0) {
        this.userList = this.userList.filter((user) => user.id !== id);
      }
    },
    async getUserList() {
      let res = await this.$axios.get('/api/users');
      if (res.data.code === 0) {
        this.userList = res.data.data;
      }
    },
  },
  mounted() {
    this.getUserList();
  },
};
</script>

3. 创建一个Vue组件，例如AddUser.vue，实现添加用户功能

<template>
  <div>
    <form>
      <label>Name:</label>
      <input type="text" v-model="name" />
      <label>Age:</label>
      <input type="number" v-model="age" />
      <button @click.prevent="addUser">添加</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      age: 0,
    };
  },
  methods: {
    async addUser() {
      let res = await this.$axios.post('/api/users', {
        name: this.name,
        age: this.age,
      });
      if (res.data.code === 0) {
        this.$router.push('/users');
      }
    },
  },
};
</script>

4. 创建一个Vue组件，例如EditUser.vue，实现编辑用户功能

<template>
  <div>
    <form>
      <label>Name:</label>
      <input type="text" v-model="user.name" />
      <label>Age:</label>
      <input type="number" v-model="user.age" />
      <button @click.prevent="updateUser">保存</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {},
    };
  },
  methods: {
    async updateUser() {
      let res = await this.$axios.put(`/api/users/${this.user.id}`, this.user);
      if (res.data.code === 0) {
        this.$router.push('/users');
      }
    },
    async getUser(id) {
      let res = await this.$axios.get(`/api/users/${id}`);
      if (res.data.code === 0) {
        this.user = res.data.data;
      }
    },
  },
  mounted() {
    this.getUser(this.$route.params.id);
  },
};
</script>

5. 配置Vue Router，例如

import Vue from 'vue';
import Router from 'vue-router';
import UserList from '@/components/UserList.vue';
import AddUser from '@/components/AddUser.vue';
import EditUser from '@/components/EditUser.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/users',
    },
    {
      path: '/users',
      name: 'UserList',
      component: UserList,
    },
    {
      path: '/users/add',
      name: 'AddUser',
      component: AddUser,
    },
    {
      path: '/users/:id/edit',
      name: 'EditUser',
      component: EditUser,
    },
  ],
});

6. 配置Vuex，例如

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    increment(context) {
      context.commit('increment');
    },
  },
});

7. 在Vue入口文件main.js中，引入Vue Router、Vuex、Axios，并配置Axios拦截器

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import axios from 'axios';

Vue.config.productionTip = false;

Vue.prototype.$axios = axios.create({
  baseURL: 'http://localhost:3000',
});

Vue.prototype.$axios.interceptors.request.use(
  (config) => {
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

Vue.prototype.$axios.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    return Promise.reject(error);
  }
);

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

至此，我们已经完成了用Vue组件+Vue Router+Vuex+Axios实现增删改查的完整示例代码。