关于vue的mixin

发表于 2020-10-30 阅读次数：本文字数： 131 阅读时长 ≈ 1 分钟

vue的mixin

当有多个组件写了多个同样的语句时，可以使用vue的mixin机制
创建一个utils/mixin.js文件，内容如下：

import {
  mapGetters,
  mapActions
} from 'vuex'

export const bookMixin = {
  computed: {
    ...mapGetters(['bookName', 'bookCover']),
  },
  methods: {
    ...mapActions(['setBookName', 'setBookCover'])
  }
}

接下来就可以在组件内这样写：

import { bookMixin } from 'utils/mixin'
  mixins:[bookMixin]
  methods: {}

这样可以将vuex的内容在一处增加，多处复用。

mapActions是写到methods里的，这样就可以替换这种写法

// 原来写法
this.$store.dispatch('setBookName',this.bookName)
// 优雅写法
this.setBookName(this.bookName)