原案例：
<template>
<div>
<ul>
<input type="text" name="" id="" v-model="state2.arr.id">
<input type="text" name="" id="" v-model="state2.arr.name">
<input type="text" name="" id="" v-model="state2.arr.age">
<button @click="add()">添加</button>
<li v-for="v in state.arr" :key="v.id" @click="del(v.id)">
{
{
v.name }}-{
{
v.age }}
</li>
</ul>
</div>
</template>
<script>
import {
reactive } from "vue";
export default {
setup() {
let {
state, del } = useReomveStudent(); // 解构赋值 { state, del }= {state,del}
let {
state2, add } = useAddStudent(state);
return {
state, del, state2, add};
},
};
// 增
let useAddStudent = (state) => {
let state2 = reactive({
arr: {
id: '',
name: '',
age: ''
}
})
let add = (()=> {
const arr = Object.assign({
},state2.arr)
state.arr.push(arr)
state2.arr.id = ''
state2.arr.name = ''
state2.arr.age = ''
})
return {
state2,add}
}
// 删
let useReomveStudent = () => {
let state = reactive({
arr: [
{
id: 1, name: "lili", age: 10 },
{
id: 2, name: "Tom", age: 20 },
{
id: 3, name: "lisa", age: 30 },
],
});
let del = (index) => {
state.arr = state.arr.filter((v, i) => v.id !== index);
console.log(state);
};
return {
state, del };
};
拆分写法 主页
<template>
<div class="home">
<ul>
<input type="text" name id v-model="state2.arr.id" />
<input type="text" name id v-model="state2.arr.name" />
<input type="text" name id v-model="state2.arr.age" />
<button @click="add()">添加</button>
<li v-for="v in state.arr" :key="v.id" @click="del(v.id)">{
{
v.name }}-{
{
v.age }}</li>
</ul>
</div>
</template>
<script>
import useAddStudent from './add.js'
import useReomveStudent from './Romve.js'
export default {
setup() {
let {
state, del } = useReomveStudent(); // 解构赋值 { state, del }= {state,del}
let {
state2, add } = useAddStudent(state);
return {
state, del, state2, add };
},
};
</script>
add.js
import {
reactive } from 'vue';
let useAddStudent = (state) => {
let state2 = reactive({
arr: {
id: "",
name: "",
age: "",
},
});
let add = () => {
const arr = Object.assign({
}, state2.arr);
state.arr.push(arr);
state2.arr.id = "";
state2.arr.name = "";
state2.arr.age = "";
};
return {
state2, add };
};
export default useAddStudent
Remove.js
import {
reactive } from "vue";
let useReomveStudent = () => {
let state = reactive({
arr: [
{
id: 1, name: "lili", age: 10 },
{
id: 2, name: "Tom", age: 20 },
{
id: 3, name: "lisa", age: 30 },
],
});
let del = (index) => {
state.arr = state.arr.filter((v, i) => v.id !== index);
console.log(state);
};
return {
state, del };
};
export default useReomveStudent