Vue3.x page function splitting method

The main difference between vue3.x and vue2.x is the use of setup , which is also a feature of vue3.x, all functions must be introduced and used through vue hooks, because setup The syntactic sugar environment is not supported this . This development method is a bit back to the original feeling, which is fine for small projects, but if the functions of the page modules are complex, if they are stacked in one file, not only will the This results in poor readability, and it is difficult to maintain for a long time, so this needs to be split by function, in the same way as vue2. Features

1. Components

You can write some new/edit, configuration, log and public operations into components, and then introduce them for use. Component splitting is the main solution to reduce the amount of page code, and it is also the way recommended by Vue.

PS: The direction of component splitting, one is public components, which can also be used in other modules of the project, and the other is page-level private components

2. Mixed in

The mix-in scenario is mainly for modules that do not need modules and there are too many application function points. In this way, some function points can be split out and introduced for use by mixing in. Examples:

mixins/instuctLog.ts:

 export default function() {
  const a = 123
  function foo() {
    console.log('foo')
  }
  return {
    a,
    foo
  }
}

page:

 <script lang="ts" setup>
import instructLogMixin from './mixins/instructLog'
const { a, foo } = instructLogMixin()
</script>

3. api

Put some api requests in the page module into the api directory for introduction and use

Fourth, vuex

Divided by page module, put some page configuration, enumeration data and data change logic of multi-component response update into vuex for processing

For more front-end knowledge, please pay attention to the applet, there will be surprises from time to time!