Vue3 combined API extraction, simple extraction, file extraction

Code is pulled out of the composite API

Simply pulling away

Pull out of 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>
// use ref to define data when you need to import a ref definition variable
import { ref, reactive } from "vue";

export default {
  name: "App".// setup is the entry function of the composition API. Variables and methods defined in the composition API need to be exposed in order to be used outside (return {XXX,Fun}).
  setup() {
    // The business logic is pulled out
    let {state,remStu} = removeStatus();
    
    return {state,remStu}
  },
};

This function deals specifically with operations on students
function removeStatus() {
  // reactive is used to define complex data types (do not use refs for complex data types)
  const state = reactive({
    // Student information
    status: [{id: 1.name: "Student 1".age: 11 },
      { id: 2.name: Student 2 "".age: 12 },
      { id: 3.name: "Students 3".age: 11},].status2: [{id: 1.name: "Student 1".age: 11 },
      { id: 2.name: Student 2 "".age: 12 },
      { id: 3.name: "Students 3".age: 11},]});// Define the logical method and click Delete user
  function remStu(i) {
    // Note that the value of this is not used but state (reactive).
    state.status.splice(i, 1);
  }

  Return {XXX, XXX} to expose variables and methods defined in the composite API to the outside world
  return {
    state,
    remStu,
  };
}
</script>

Copy the code

Pull the internal logic out of the external file.

<template>
  <div>
    <! Add student information -->
    <form action="">
      <label for=""
        >ID: <input type="text" v-model="state2.addInfo.id"
      /></label>
      <label for=""
        >Name:<input type="text" v-model="state2.addInfo.name"
      /></label>
      <label for=""
        >Age:<input type="text" v-model="state2.addInfo.age"
      /></label>
      <input type="submit" value="Add" @click="addStu" />
    </form>
    <! -- Render student information -->
    <ul>
      <li v-for="(item, i) in state.status" :key="i" @click="remStu(i)">
        {{ item.name }} --- {{ item.age }}
      </li>
    </ul>
  </div>
</template>

<script>
// use ref to define data when you need to import a ref definition variable
import { ref, reactive } from "vue";

// Import and remove business logic, add, delete methods
import removeStatus from "./common/status/remove";
import addStatu from "./common/status/add";

export default {
  name: "App".// setup is the entry function of the composition API. Variables and methods defined in the composition API need to be exposed in order to be used outside (return {XXX,Fun}).
  setup() {
    // The business logic is pulled out
    let { state, remStu } = removeStatus();
    
    Since state is used in addStatu, there is no state in the local scope, so state is passed as an argument
    let { state2, addStu } = addStatu(state);

    Return {XXX, XXX} to expose variables and methods defined in the composite API to the outside world
    return{ state, remStu, state2, addStu }; }};</script>

Copy the code

Add.js adds student information

import { reactive } from "vue";

// Add student information by pulling out
function addStatu(state) {
  // Bind to v-model to store user input information
  const state2 = reactive({
    addInfo: {
      id: "".name: "".age: "",}});// Add student information to state.status
  function addStu(e) {
    // Block the form's default behavior first (submit)
    e.preventDefault();
    const newStu = Object.assign({}, state2.addInfo);
    // Add student information to state.status
    state.status.push(newStu);
    // Use the v-Module bidirectional binding principle to clear the addInfo input field and make the current field empty
    state2.addInfo.id = "";
    state2.addInfo.name = "";
    state2.addInfo.age = "";
  }

  // Add state2 and addStu as the return result of the function
  return { state2, addStu };
}

// Export the module
export default addStatu;
Copy the code

Remove.js Click delete student information

import { reactive } from "vue";

// Click student info, delete student info to extract business logic this function handles operations about students
function removeStatus() {
  // reactive is used to define complex data types (do not use refs for complex data types)
  const state = reactive({
    // Student information
    status: [{id: 1.name: "Student 1".age: 11 },
      { id: 2.name: Student 2 "".age: 12 },
      { id: 3.name: "Students 3".age: 11},].status2: [{id: 1.name: "Student 1".age: 11 },
      { id: 2.name: Student 2 "".age: 12 },
      { id: 3.name: "Students 3".age: 11},]});// Define the logical method and click Delete user
  function remStu(i) {
    // Note that the value of this is not used but state (reactive).
    state.status.splice(i, 1);
  }

  Return {XXX, XXX} to expose variables and methods defined in the composite API to the outside world
  return {
    state,
    remStu,
  };
}

// Export the module
export default removeStatus;
Copy the code