现在我们学习组合API的内容已经不少了，我们用它来重写一下我们之前写过的一个小例子：超级英雄管理系统
我们新建一个项目，把App.vue中没用的内容都删除掉
<template>
<h1>超级英雄管理系统</h1>
</template>
<script>
export default {
name: 'App',
setup() {
},
}
</script>
1.展示超级英雄列表
定义一个heroList，然后用v-for把它循环出来，相信大家已经很熟悉了，我就直接上代码了
<template>
<h1>超级英雄管理系统</h1>
<ul>
<li v-for="item in heroList" :key="item">
<span>{{ item }}</span>
</li>
</ul>
</template>
<script>
import { reactive } from 'vue'
export default {
name: 'App',
setup() {
const heroList = reactive(['钢铁侠', '蜘蛛侠', '美国队长'])
return {
heroList,
}
},
}
</script>
2.使用计算属性显示超级英雄的总数
const total = computed(() => {
return heroList.length
})
<div>现在注册在案的超级英雄有{{ total }}位</div>
当然需要在setup中return total这个数据了，我这里就不写了
现在的结果是
3.添加超级英雄弹框
我们添加一个按钮，点击后出现弹框，在弹框中输入超级英雄的名字，然后点击确定就可以添加了
js逻辑部分
const showAddModal = ref(false) // 是否显示弹框
const addHeroName = ref('') // 名字输入框的值
const onAddHeroClick = () => { // 点击添加超级英雄按钮回调
showAddModal.value = true
}
const onAddHeroSubmit = () => { // 点击确定按钮的回调
heroList.push(addHeroName.value)
showAddModal.value = false
addHeroName.value = ''
}
return {
heroList,
total,
showAddModal,
addHeroName,
onAddHeroClick,
onAddHeroSubmit,
}
template部分
<button @click="onAddHeroClick">添加超级英雄</button>
<div class="add-modal" v-show="showAddModal">
<div class="add-box">
<input type="text" v-model="addHeroName" />
<br />
<button @click="onAddHeroSubmit">确定</button>
</div>
</div>
这样添加功能就完成了
4.删除超级英雄
js部分
const onDel = (index) => {
heroList.splice(index, 1)
}
return {
heroList,
total,
showAddModal,
addHeroName,
onAddHeroClick,
onAddHeroSubmit,
onDel, // 新增
}
template部分
<li v-for="(item, index) in heroList" :key="item">
<span>{{ item }}</span>
<span class="del" @click="onDel(index)">删除</span>
</li>
这样就完成了我们的超级英雄管理系统的基本功能了
全部代码
<template>
<h1>超级英雄管理系统</h1>
<ul>
<li v-for="(item, index) in heroList" :key="item">
<span>{{ item }}</span>
<span class="del" @click="onDel(index)">删除</span>
</li>
</ul>
<div>现在注册在案的超级英雄有{{ total }}位</div>
<button @click="onAddHeroClick">添加超级英雄</button>
<div class="add-modal" v-show="showAddModal">
<div class="add-box">
<input type="text" v-model="addHeroName" />
<br />
<button @click="onAddHeroSubmit">确定</button>
</div>
</div>
</template>
<script>
import { computed, reactive, ref } from 'vue'
export default {
name: 'App',
setup() {
// 展示部分
const heroList = reactive(['钢铁侠', '蜘蛛侠', '美国队长'])
const total = computed(() => {
return heroList.length
})
// 添加部分
const showAddModal = ref(false)
const addHeroName = ref('')
const onAddHeroClick = () => {
showAddModal.value = true
}
const onAddHeroSubmit = () => {
heroList.push(addHeroName.value)
showAddModal.value = false
}
// 删除部分
const onDel = (index) => {
heroList.splice(index, 1)
}
return {
heroList,
total,
showAddModal,
addHeroName,
onAddHeroClick,
onAddHeroSubmit,
onDel,
}
},
}
</script>
<style scoped>
.add-modal {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.add-box {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 25vh;
background-color: #fff;
text-align: center;
padding-top: 15vh;
}
.del {
margin-left: 5px;
color: red;
cursor: pointer;
}
</style>
现在我们使用组合API的优势稍微显示出来了，把同一业务逻辑的代码放在了一起，
展示部分、添加部分和删除部分分块写好，方便开发与维护
而不是像以前一样数据写在一起、方法写在一起了
5.把逻辑代码分到不同的文件中
现在我们写的js代码也没多少，看着也没什么问题，但是在实际开发中，一个vue文件中的逻辑代码可能上千行，维护起来就特别麻烦，所以我们要把展示、添加、删除的逻辑分别放到不同的文件中
在src目录下建立一个文件夹hero，用于放我们的独立文件，然后新建三个文件
useShow
useAdd
useDel
根据惯例或者说从react那学来的方式，这些文件我们以use开头
把我们相关模块的代码放到文件中
useShow.js
import { reactive, computed } from 'vue'
const heroList = reactive(['钢铁侠', '蜘蛛侠', '美国队长'])
const total = computed(() => {
return heroList.length
})
export { heroList, total }
useAdd.js
import { ref } from 'vue'
function useAdd(heroList) {
const showAddModal = ref(false)
const addHeroName = ref('')
const onAddHeroClick = () => {
showAddModal.value = true
}
const onAddHeroSubmit = () => {
heroList.push(addHeroName.value)
showAddModal.value = false
addHeroName.value = ''
}
return {
showAddModal,
addHeroName,
onAddHeroClick,
onAddHeroSubmit,
}
}
export default useAdd
useDel.js
function useDel(heroList) {
const onDel = (index) => {
heroList.splice(index, 1)
}
return {
onDel,
}
}
export default useDel
最后在App.vue中使用
import { heroList, total } from './hero/useShow'
import useAdd from './hero/useAdd'
import useDel from './hero/useDel'
export default {
name: 'App',
setup() {
const {
showAddModal,
addHeroName,
onAddHeroClick,
onAddHeroSubmit,
} = useAdd(heroList)
const { onDel } = useDel(heroList)
return {
heroList,
total,
showAddModal,
addHeroName,
onAddHeroClick,
onAddHeroSubmit,
onDel,
}
},
}
</script>
这样看上去是更麻烦了，但是对于复杂的组件来说，这样拆分以后，在维护的时候不管是读代码、还是改代码都方便了。
这节课就到这里了。
