写一个Vue3脚手架人员信息的添加、删除和修改。一个是信息添加页,另一个是数据管理页。使用Vuex进行数据存储,使用Router作为两个页面的路由
时间: 2024-03-08 15:47:32 浏览: 26
好的,我可以帮你解答这个问题。
首先,我们需要安装Vue3、Vuex和Vue Router:
```bash
npm install vue@next vuex@next vue-router@next
```
然后,我们可以创建一个Vue实例,并将Vuex和Vue Router集成进来:
```javascript
import { createApp } from 'vue'
import Vuex from 'vuex'
import VueRouter from 'vue-router'
import App from './App.vue'
import AddPerson from './components/AddPerson.vue'
import ManageData from './components/ManageData.vue'
const store = new Vuex.Store({
state: {
persons: [] // 存储人员信息的数组
},
mutations: {
addPerson(state, person) {
state.persons.push(person) // 添加人员信息
},
deletePerson(state, index) {
state.persons.splice(index, 1) // 删除人员信息
},
updatePerson(state, payload) {
state.persons[payload.index] = payload.person // 更新人员信息
}
}
})
const router = new VueRouter({
routes: [
{ path: '/', component: AddPerson },
{ path: '/manage', component: ManageData }
]
})
const app = createApp(App)
app.use(store)
app.use(router)
app.mount('#app')
```
在这个例子中,我们创建了一个Vuex的store来存储人员信息,包括添加、删除和更新人员信息的方法。同时,我们也创建了一个Vue Router实例,包括两个路由:添加人员信息的页面和数据管理页面。我们将store和router都注入到Vue实例中。
接下来,我们可以创建两个组件:AddPerson和ManageData。AddPerson组件包含一个表单,用于添加人员信息;ManageData组件包含一个表格,用于展示和管理人员信息。
AddPerson.vue:
```html
<template>
<div>
<h2>添加人员信息</h2>
<form @submit.prevent="addPerson">
<div>
<label for="name">姓名:</label>
<input type="text" id="name" v-model="name" required>
</div>
<div>
<label for="age">年龄:</label>
<input type="number" id="age" v-model="age" required>
</div>
<div>
<label for="gender">性别:</label>
<select id="gender" v-model="gender" required>
<option value="">请选择</option>
<option value="male">男</option>
<option value="female">女</option>
</select>
</div>
<button type="submit">添加</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
name: '',
age: '',
gender: ''
}
},
methods: {
addPerson() {
const person = { name: this.name, age: this.age, gender: this.gender }
this.$store.commit('addPerson', person) // 调用Vuex的添加人员信息方法
this.$router.push('/manage') // 跳转到数据管理页面
}
}
}
</script>
```
ManageData.vue:
```html
<template>
<div>
<h2>数据管理</h2>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="(person, index) in persons" :key="index">
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
<td>{{ person.gender }}</td>
<td>
<button @click="editPerson(index)">编辑</button>
<button @click="deletePerson(index)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
computed: {
persons() {
return this.$store.state.persons // 从Vuex中获取人员信息数组
}
},
methods: {
editPerson(index) {
const person = this.$store.state.persons[index]
this.$router.push(`/edit/${index}`) // 跳转到编辑页面
},
deletePerson(index) {
this.$store.commit('deletePerson', index) // 调用Vuex的删除人员信息方法
}
}
}
</script>
```
在ManageData组件中,我们使用computed属性从Vuex中获取人员信息数组,然后使用v-for指令遍历渲染表格。在每一行中,我们都包含了编辑和删除按钮,点击编辑按钮会跳转到编辑页面,点击删除按钮会调用Vuex的删除人员信息方法。
最后,我们可以创建一个EditPerson组件,用于编辑人员信息:
```html
<template>
<div>
<h2>编辑人员信息</h2>
<form @submit.prevent="updatePerson">
<div>
<label for="name">姓名:</label>
<input type="text" id="name" v-model="name" required>
</div>
<div>
<label for="age">年龄:</label>
<input type="number" id="age" v-model="age" required>
</div>
<div>
<label for="gender">性别:</label>
<select id="gender" v-model="gender" required>
<option value="">请选择</option>
<option value="male">男</option>
<option value="female">女</option>
</select>
</div>
<button type="submit">保存</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
name: '',
age: '',
gender: ''
}
},
mounted() {
const index = this.$route.params.index
const person = this.$store.state.persons[index]
this.name = person.name
this.age = person.age
this.gender = person.gender
},
methods: {
updatePerson() {
const index = this.$route.params.index
const person = { name: this.name, age: this.age, gender: this.gender }
this.$store.commit('updatePerson', { index, person }) // 调用Vuex的更新人员信息方法
this.$router.push('/manage') // 跳转到数据管理页面
}
}
}
</script>
```
在EditPerson组件中,我们首先从路由参数中获取要编辑的人员信息的索引,然后从Vuex中获取该人员信息,并将其显示在表单中。在保存按钮被点击时,我们调用Vuex的更新人员信息方法,将更新后的人员信息保存到Vuex中,并跳转到数据管理页面。
以上就是一个Vue3脚手架人员信息的添加、删除和修改的示例。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)