好的，下面我来简单介绍一下使用
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 实现增删改查的应用就完成了。
8469
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
