vue3 组合API的 抽离,简单抽离、文件抽离

3,124 阅读2分钟

组合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;