Vue 混入mixin

案例1: 项目中使用混入：预留信息功能

mixin.js 

export default {
  computed: {
    cacheKey () {
      console.warn('cacheKey', this.$store.getters.merchantCode)
      return 'MCT_PROD_RESERVED_INFORMATION_' + this.$store.getters.merchantCode
    },
    inputValue () {
      return this.$store.state.reserveInfo.cacheValue
    },
    reserveInfo () {
      return this.$store.state.reserveInfo.cacheValue
    }
  },
  methods: {
    // 查询预留信息
    getHttpData () {
      this.$HttpReq.run('/merchant-product/queryInfo', {
        cacheKey: this.cacheKey
      },
      {
        showLoading: true,
        ...this.$store.getters.encrypt
      }
      )
        .then((res) => {
          const { success, errorCode, result } = res.data
          if (errorCode === 'REDIS_QUERY_NULL_ERROR') {
            this.$store.commit('reserveInfo', {})
          }
          if (success) {
            this.$store.commit('reserveInfo', result)
          }
        })
    }
  }
}

组件：reserveInfo.vue（新增/修改预留信息）

组件：HomeTips.vue(引入混入 展示预留信息)

 home.vue(引入混入mixin.js,使用预留信息功能)

使用HomeTips组件