Detailed explanation of the function splitting method of page

The difference in the main application is the use of setup, which is also a feature. All functions must be introduced and used through vue hooks, because the setup syntax sugar environment does not support this. This development method is a bit back to the original feeling. It is okay for small projects, but if the page module functions are complicated, if they are all placed in a file, it will not only cause poor readability, but also difficult to maintain over time. Therefore, this requires splitting by function. The same method is the same, one is split by component, the other is mixed processing, and the other is the separation of functions through vuex or API.

1. Components

You can write some new additions/editors, configurations, logs and public operations into the component and then introduce them into use. Component splitting is the main solution to reduce the amount of page code, and it is also the recommended method for vue.

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

2. Mix in

The mixed-in scenario is mainly aimed at not requiring modules and too many application functions. For example, some functional points can be split out and introduced into use through mixed-in. Example:

mixins/：

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

page:

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

III. API

Put some API requests in the page module into the API directory and introduce them to use

4. vuex

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

This is the end of this article about the detailed explanation of the function splitting method of pages. For more related page splitting content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!