Content abstract

Since Vue3 announced the RFC stage, Muyu decided to do a Vue3 experience output for some time. I hope you can give me some advice on the shortcomings.

1. Suitable for Composition Api scenarios

• Description:

In the old writing method of Vue2, when the number of business codes reaches a certain level, the sense of separation between data and methods is very obvious, and redundant energy is often consumed in the up-down relationship between codes.

The advent of the Vue3 Composition Api makes business code more efficient.

• Solution:

• Use:

Vue Options

export default {
  data() {
    return {
      a: {
        version: 2.state: []},b: 'string'.c: 114514
      // ...}},computed: {
    c2() {
      return this.$store.state.count * 2
    }
    // ...
  },
  methods: {
    handleRouter(pathName) {
      if (this.$route.name === pathName) {
        // do something}},handleVuex(someData) {
      this.$store.commit('something', someData)
      // do something
    }
    // ...}}Copy the code

Vue Composition

import { computed, ref, reactive } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
export default {
  setup() {
    // vuex do something
    const store = useStore();
    
    const c2 = computed(() = > store.state.count * 2);
    
    const handleVuex = (someData) = > {
      this.$store.commit('something', someData)
      // do something
    };
    
    // some data
    const a = reactive({
      version: 2.state: []});const b = ref('string');
    const c = ref(114514);
    
    const route = useRoute();
    
    // some method 
    const handleRouter = (pathName) = > {
      if (route.name === pathName) {
        // do something}};// Expose the template and use it
    return{ a, b, c, c2, handleVuex, handleRouter }; }}Copy the code

Vue Composition is more about clarity and separation of business code, so try writing one or more js files separately and importing them.

// myFunction.js
import { reactive, ref, computed, toRefs } from "vue";
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
// a combinatorial logic function
export const useFunction() {
  const store = useStore();
    
  const a = reactive({
    version: 2.state: []});const c2 = computed(() = > store.state.count * 2);
    
  const handleVuex = (someData) = > {
    this.$store.commit('something', someData)
    // do something
  };
  
  return {
    a: toRefs(a), // It is worth mentioning that toRefs is recommended here otherwise the external deconstruction will break responsiveness
    c2,  // Computed can be exported directly
    handleVuex
  }
}
// Another combinatorial logic function
export const useAnotherFunction() {
  const b = ref('string');
  const c = ref(114514);
    
  const route = useRoute();
   
  // some method 
  const handleRouter = (pathName) = > {
    if (route.name === pathName) {
      // do something}};return {
    b,
    c,
    hanldeRouter
  }
}


// myComponents.vue
import { useFunction, useAnotherFunction } from './myFunction.js'
export default {
  setup() {
    const { a, c2, handleVuex } = useFunction();
    const { b, c, handleRouter } = useAnotherFunction();
    
    // = w = suddenly extremely happy
    
    // Expose the template and use it
    return{ a, b, c, c2, handleVuex, handleRouter }; }}Copy the code

subsequent

The purpose is still to try to write articles. Currently, I am using Vue3 to do a personal hobby project. If there are complex functions worth producing in the future, I will update the articles