Enhance Vue components with mixins

The target

In the previous article, we divided the toggle component into three sub-components, toggle-button, toggle-on and toggle-Off, and everything worked well, but there were some problems:

  • toggleThe internal state and methods of a component can only be shared with these three child components, and we expect third-party components to share these states and methods as well
  • Inject logic we have written the inject logic three times and would prefer to declare it only once if possible (DRY principle)
  • Inject’s injection logic is currently hard-coded, and in some cases we might expect to configure it dynamically

If you are familiar with React, the concept of HOC (high order component) will immediately come to mind. It is also a common pattern in React, which improves the reuse and flexibility of react components. Do we also have tools or features in VUE to improve component reuse and flexibility? The answer, of course, is mixin.

implementation

For mixins themselves, I don’t want to go into too much detail here. For those unfamiliar with mixins, please refer to the official documentation. We extract the common injection logic by declaring a mixin called toggleMixin, as follows:

export const withToggleMixin = {
  inject: {
    toggleComp: "toggleComp"}};Copy the code

Then, whenever a dependency provided by the Toggle component needs to be injected, the current mixin is mixed in as follows:

mixins: [withToggleMixin]
Copy the code

If we add some flexibility to the injection logic, such as wishing to freely declare the keys of the injected dependencies, we can use the concept of HOC to declare a higher-order mixin (HOM?? Skin it, have fun), as follows:

export function withToggle(parentCompName = "toggleComp") {
  return {
    inject: {
      [parentCompName]: "toggleComp"}}; }Copy the code

This HOC Mixin can be used as follows:

mixins: [withToggle("toggle")]
Copy the code

So that when you call the state and method related to the Toggle component in the current component, instead of this.toggleComp, you call this.toggle.

results

By implementing a toggleMixin, we successfully decouple the injected logic so that we can mixin the mixin every time we need to share the state and methods of the toggle component. This solves the problem that third-party components cannot share their state and methods. In the online example code, I implement two third-party components, namely Custom-button and Custom-status-indicator. The former is a custom switch. Use withToggleMixin to blend in the injection logic, which is a custom status indicator, and the withToggle higher-order function to blend in the injection logic.

You can see the implementation code and demo of this component in the link below:

  • Sandbox: Online demo
  • github: part-3

conclusion

Mixins, as a very flexible way to distribute reusable functionality in Vue components, can be useful in many scenarios, especially in components that deal with common logic, such as notifications, form error prompts, and so on.

directory

github gist