总结vue映射的方法与混入的使用过程

Vue.js 是一个流行的前端框架，拥有方便的数据响应式系统和丰富的生命周期。Vue.js 不仅提供了一种方便的组件方式来搭建界面，还提供了许多简化代码的特性，如映射和混入。

Vue映射

什么是映射？

Vue映射是一种用于将Vue组件的属性或方法映射到另一个对象的技术。这样做的主要目的是为了方便组件与外界进行交互和相互配合。

映射使用方法

Vue的映射方法包括两种：

1. computed
2. methods

这两种方法的功能类似，都可以让我们在组件外部访问组件的计算属性或方法。

computed

computed方法常用于计算属性，例如：

<template>
  <div>
    {{ fullName }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  }
}
</script>

这个组件包含一个计算属性 fullName，它将 firstName 和 lastName 相加起来。在 <template> 中，通过插值语法 {{ fullName }} 引用这个计算属性。

我们也可以将这个计算属性映射到外部对象，方便其他组件使用：

<script>
export default {
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  },
  created() {
    this.$store.commit('updateFullName', this.fullName)
  }
}
</script>

在这个组件的 created 钩子函数中，我们通过 commit 方法将 fullName 映射到 Vuex 的全局状态中。

methods

和 computed 方法不同，methods 方法通常用来定义方法：

<template>
  <div>
    <button @click="greet">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    greet() {
      alert('Hello, world!')
    }
  }
}
</script>

这个组件包含一个 greet 方法，点击按钮后会触发这个方法。

我们可以将这个方法映射到外部对象，例如：

<script>
export default {
  methods: {
    greet() {
      alert('Hello, world!')
    }
  },
  mounted() {
    this.$store.commit('registerGreet', this.greet)
  }
}
</script>

在这个组件的 mounted 钩子函数中，我们通过 commit 方法将 greet 方法映射到 Vuex 的全局状态中，让其他组件也能访问这个方法。

Vue混入

什么是混入？

Vue混入是指一种将多个组件共用的逻辑提取出来并封装成一个混入对象的技术，以便在多个组件中重复使用。混入对象可以包含数据、计算属性、方法、生命周期钩子等内容。

混入使用方法

我们可以通过使用 Vue.mixin 方法来定义混入对象：

const mymixin = {
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  },
  methods: {
    greet() {
      alert('Hello, world!')
    }
  }
}

Vue.mixin(mymixin)

上述代码定义了一个名为 mymixin 的混合对象，它包含了 computed 和 methods 两个属性，其中 computed 属性定义了计算属性 fullName，而 methods 属性定义了方法 greet。

我们通过 Vue.mixin(mymixin) 将 mymixin 对象注册到全局混入中。

现在，我们可以在组件中引用这个混入对象，例如：

<template>
  <div>
    {{ fullName }}
    <button @click="greet">Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  mixins: [mymixin]
}
</script>

这个组件引用了 mymixin 混入对象，可以直接使用 fullName 计算属性和 greet 方法。

示例说明

示例1：映射 Vuex 的 getter

假设我们在 Vuex 的全局状态中定义了一个名为 totalCount 的 getter，表示所有商品的数量。现在我们需要在多个组件中显示这个数量。

我们可以在组件中通过映射的方式访问这个 getter：

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'totalCount'
    ])
  }
}
</script>

这样，我们就能够在组件中通过 this.totalCount 访问这个 getter 的值了。

示例2：混入表单验证

假设我们有多个表单，它们的表单验证逻辑都很相似，都需要验证输入是否为空、是否合法等等。

我们可以将这个表单验证逻辑封装成一个混入对象：

const formValidationMixin = {
  data() {
    return {
      formErrors: {}
    }
  },
  methods: {
    validateRequired(fieldName, value) {
      if (!value) {
        this.formErrors[fieldName] = 'This field is required.'
      }
    },
    validateEmail(fieldName, value) {
      // email validation logic
    }
  }
}

这个混入对象包含了一个名为 formErrors 的状态用于存储表单错误信息，以及两个表单验证方法：validateRequired 和 validateEmail。

我们可以在表单组件中引用这个混入对象：

<template>
  <form @submit.prevent="onSubmit">
    <div>
      <label for="name">Name:</label>
      <input type="text" id="name" v-model="name">
      <div>{{ formErrors.name }}</div>
    </div>
    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" v-model="email">
      <div>{{ formErrors.email }}</div>
    </div>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
import formValidationMixin from './formValidationMixin'

export default {
  mixins: [formValidationMixin],
  data() {
    return {
      name: '',
      email: '',
    }
  },
  methods: {
    onSubmit() {
      this.formErrors = {}
      this.validateRequired('name', this.name)
      this.validateEmail('email', this.email)
      // submit form logic
    }
  }
}
</script>

这个组件引用了 formValidationMixin 混入对象，可以直接使用 validateRequired 和 validateEmail 两个方法对输入进行验证。

这样做的好处是，我们可以将表单验证逻辑封装在混入对象里，避免了在多个组件中重复编写相同的验证代码，提高了代码重用性和可维护性。