组合API中 代码抽离
简单抽离
抽离到 export default 外部
<template>
<div>
<ul>
<li v-for="(item, i) in state.status" :key="i" @click="remStu(i)">
{{ item.name }} --- {{ item.age }}
</li>
</ul>
</div>
</template>
<script>
// 需要导入 ref 定义变量的时候 使用ref定义 数据是响应式的
import { ref, reactive } from "vue";
export default {
name: "App",
// setup 是组合API 的入口函数, 在组合API中定义的变量、方法、 要想在外界使用 需要暴露出去(return { xxx,Fun})
setup() {
// 业务逻辑抽离了出去 这里只需要导入就可以
let {state,remStu} = removeStatus();
return {state,remStu}
},
};
// 将业务逻辑抽离出来 这个函数 专门处理关于学生的操作
function removeStatus() {
// reactive 用于定义复杂数据类型 (复杂数据类型 不要使用ref定义)
const state = reactive({
// 学生信息
status: [
{ id: 1, name: "学生1", age: 11 },
{ id: 2, name: "学生2", age: 12 },
{ id: 3, name: "学生3", age: 11 },
],
status2: [
{ id: 1, name: "学生1", age: 11 },
{ id: 2, name: "学生2", age: 12 },
{ id: 3, name: "学生3", age: 11 },
],
});
// 定义逻辑方法 点击删除用户
function remStu(i) {
// 注意 这里操作的时候 不再使用this 使用的是 state(因为上面定义 state 的值为 reactive)
state.status.splice(i, 1);
}
// 在组合API中定义的变量、方法 要想在外界使用,必须通过 return{xxx,xxx} 将其暴露 外部才能使用
return {
state,
remStu,
};
}
</script>
抽离成模块,(将内部逻辑,抽离到外部文件)
<template>
<div>
<!-- 添加学生信息 -->
<form action="">
<label for=""
>ID: <input type="text" v-model="state2.addInfo.id"
/></label>
<label for=""
>姓名: <input type="text" v-model="state2.addInfo.name"
/></label>
<label for=""
>年龄: <input type="text" v-model="state2.addInfo.age"
/></label>
<input type="submit" value="添加" @click="addStu" />
</form>
<!-- 渲染学生信息 -->
<ul>
<li v-for="(item, i) in state.status" :key="i" @click="remStu(i)">
{{ item.name }} --- {{ item.age }}
</li>
</ul>
</div>
</template>
<script>
// 需要导入 ref 定义变量的时候 使用ref定义 数据是响应式的
import { ref, reactive } from "vue";
// 导入抽离出去的业务逻辑, 添加,删除方法
import removeStatus from "./common/status/remove";
import addStatu from "./common/status/add";
export default {
name: "App",
// setup 是组合API 的入口函数, 在组合API中定义的变量、方法、 要想在外界使用 需要暴露出去(return { xxx,Fun})
setup() {
// 业务逻辑抽离了出去 这里只需要导入就可以
let { state, remStu } = removeStatus();
// 添加学生信息 因为addStatu中使用到了 state, 局部作用域中没有state,所以要将 state作为实参传递过去
let { state2, addStu } = addStatu(state);
// 在组合API中定义的变量、方法 要想在外界使用,必须通过 return{xxx,xxx} 将其暴露 外部才能使用
return { state, remStu, state2, addStu };
},
};
</script>
add.js 添加学生信息
import { reactive } from "vue";
// 抽离出来的 添加学生信息
function addStatu(state) {
// 跟v-model绑定 用来存储用户输入的信息
const state2 = reactive({
addInfo: {
id: "",
name: "",
age: "",
},
});
// 向state.status 中 添加学生信息
function addStu(e) {
// 先阻止 表单默认行为(提交)
e.preventDefault();
const newStu = Object.assign({}, state2.addInfo);
// 将学生信息 添加到 state.status 中
state.status.push(newStu);
// 利用 v-module 双向绑定原理 将addInfo 数据清空 input输入框中也理所当前的 变为了空
state2.addInfo.id = "";
state2.addInfo.name = "";
state2.addInfo.age = "";
}
// 将 state2 和 addStu 作为函数的返回结果, 组合API中引入,暴露
return { state2, addStu };
}
//导出模块
export default addStatu;
remove.js 点击删除学生信息
import { reactive } from "vue";
// 点击学生信息,学生信息删除 将业务逻辑抽离出来 这个函数 专门处理关于学生的操作
function removeStatus() {
// reactive 用于定义复杂数据类型 (复杂数据类型 不要使用ref定义)
const state = reactive({
// 学生信息
status: [
{ id: 1, name: "学生1", age: 11 },
{ id: 2, name: "学生2", age: 12 },
{ id: 3, name: "学生3", age: 11 },
],
status2: [
{ id: 1, name: "学生1", age: 11 },
{ id: 2, name: "学生2", age: 12 },
{ id: 3, name: "学生3", age: 11 },
],
});
// 定义逻辑方法 点击删除用户
function remStu(i) {
// 注意 这里操作的时候 不再使用this 使用的是 state(因为上面定义 state 的值为 reactive)
state.status.splice(i, 1);
}
// 在组合API中定义的变量、方法 要想在外界使用,必须通过 return{xxx,xxx} 将其暴露 外部才能使用
return {
state,
remStu,
};
}
// 将模块导出
export default removeStatus;