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

好的，下面我来简单介绍一下使用 Vue 组件、Vue 路由、Vuex 和 Axios 实现增删改查的步骤。

1. 安装必要的依赖：

npm install vue vue-router vuex axios --save

2. 创建 Vue 组件：

在 src/components 目录下创建四个组件，分别是 List、Add、Edit 和 Detail。这四个组件分别用于展示列表、新增数据、编辑数据和查看详情。

List.vue 组件：

<template>
  <div>
    <h3>数据列表</h3>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>名称</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>
            <router-link :to="{ name: 'detail', params: { id: item.id }}">查看</router-link>
            <router-link :to="{ name: 'edit', params: { id: item.id }}">编辑</router-link>
            <button @click="handleDelete(item.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <router-link :to="{ name: 'add' }">新增</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: []
    }
  },
  methods: {
    handleDelete(id) {
      // 发送删除请求
      this.$axios.delete(`/api/data/${id}`).then(() => {
        // 删除成功后重新获取数据
        this.getList()
      })
    },
    getList() {
      // 发送获取列表请求
      this.$axios.get('/api/data').then(res => {
        this.list = res.data
      })
    }
  },
  created() {
    // 页面创建时获取数据列表
    this.getList()
  }
}
</script>

Add.vue 组件：

<template>
  <div>
    <h3>新增数据</h3>
    <form @submit.prevent="handleSubmit">
      <label>
        名称：
        <input type="text" v-model="formData.name" />
      </label>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      // 发送新增请求
      this.$axios.post('/api/data', this.formData).then(() => {
        // 新增成功后跳转到列表页
        this.$router.push({ name: 'list' })
      })
    }
  }
}
</script>

Edit.vue 组件：

<template>
  <div>
    <h3>编辑数据</h3>
    <form @submit.prevent="handleSubmit">
      <label>
        名称：
        <input type="text" v-model="formData.name" />
      </label>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      // 发送编辑请求
      this.$axios.put(`/api/data/${this.$route.params.id}`, this.formData).then(() => {
        // 编辑成功后跳转到列表页
        this.$router.push({ name: 'list' })
      })
    },
    getData() {
      // 发送获取数据请求
      this.$axios.get(`/api/data/${this.$route.params.id}`).then(res => {
        this.formData = res.data
      })
    }
  },
  created() {
    // 页面创建时获取数据
    this.getData()
  }
}
</script>

Detail.vue 组件：

<template>
  <div>
    <h3>数据详情</h3>
    <p>ID：{{ data.id }}</p>
    <p>名称：{{ data.name }}</p>
    <button @click="$router.push({ name: 'list' })">返回</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {}
    }
  },
  methods: {
    getData() {
      // 发送获取数据请求
      this.$axios.get(`/api/data/${this.$route.params.id}`).then(res => {
        this.data = res.data
      })
    }
  },
  created() {
    // 页面创建时获取数据
    this.getData()
  }
}
</script>

3. 创建 Vue 路由：

在 src/router/index.js 文件中定义四个路由，分别对应 List、Add、Edit 和 Detail 组件。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/list'
  },
  {
    path: '/list',
    name: 'list',
    component: () => import('../components/List.vue')
  },
  {
    path: '/add',
    name: 'add',
    component: () => import('../components/Add.vue')
  },
  {
    path: '/edit/:id',
    name: 'edit',
    component: () => import('../components/Edit.vue')
  },
  {
    path: '/detail/:id',
    name: 'detail',
    component: () => import('../components/Detail.vue')
  }
]

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

export default router

4. 创建 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: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    }
  },
  modules: {}
})

5. 在 main.js 中配置 Axios：

在 main.js 中配置 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

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

6. 在 App.vue 中使用组件：

在 App.vue 中引入 List 组件，并在模板中使用 router-view 标签来渲染路由组件。

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
import List from './components/List.vue'

export default {
  components: {
    List
  }
}
</script>

7. 启动应用：

在命令行中执行以下命令启动应用：

npm run serve

至此，一个简单的使用 Vue 组件、Vue 路由、Vuex 和 Axios 实现增删改查的应用就完成了。