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（新增/修改预留信息）

<template>
  <div class="reserveInfo">
    <div class="tit" v-if="showTitle">{{readonly?'修改':'新增'}}预留信息</div>
    <div class="area-wrapper" :style="{height:inputStyle.height}">
      <y-input
        ref="inputt"
        inputType="textarea"
        :maxlength="maxlength"
        :inputStyle="inputStyle"
        :readonly="readonly"
        :defaultValue="inputValue"
        @input="input"
        placeholder="请输入预留信息"
      ></y-input>
      <div class="edit-toggle" @click="edit">修改</div>
      <div v-show="errorInput" class="y-error">
        不能包含特殊字符
      </div>
    </div>
    <div class="mark-wrapper">
      <p v-for="(item, index) in msg" :key="index">
        {{index+1}}、{{item}}
      </p>
    </div>
    <div class="btn-wrapper">
      <y-button type="02" @click="confirm">确认</y-button>
    </div>
  </div>
</template>

<script>
  import mixins from './mixins'
  export default {
    name: 'reserveInfo',
    mixins: [mixins],
    props: {
      showTitle: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        msg: [
          `您的“预留信息”是提高您对假网站的辨别能力的一种简单有效的方法，当您在此设置好预留
        信息后，在您每次登录时，该信息将显示在欢迎页面上，如果该网站未能正确显示您预留
        的预留信息，说明该网站不是*****门户网站，请立即退出，并及时与***公司客服联系`,
          '您可以填写60个字符以内的信息，且不能包含特殊字符[]^$~@#%&<>{}\'"'
        ],
        inputStyle: {
          height: '68px',
          borderRadius: '4px',
          padding: '6px'
        },
        errorInput: false,
        maxlength: 60,
        readonly: false
      }
    },
    computed: {
      cacheKey () {
        return 'MCT_PROD_RESERVED_INFORMATION_' + this.$store.getters.merchantCode
      }
    },
    created () {
      this.getHttpData()
    },
    methods: {
      // 保存预留信息
      saveHttpData () {
        this.$HttpReq.run('/merchant-product/insertReservedInfo', {
          cacheKey: this.cacheKey,
          cacheValue: this.inputValue
        })
          .then((res) => {
            const { success, result, errorMsg } = res.data
            const sign = success && result
            this.$Global.messageAlertAsync(this, `${sign ? '保存成功' : errorMsg || '失败'}`, {
              // iconType: 2, // 成功
              // iconType: 4, // 失败
              iconType: sign ? 2 : 4
            })
          })
      },
      autoFocus () {
      },
      isErrorValid (val) {
        if (val === '') return false
        const reg = /^.[^\[\]\^$~@#%&<>\{\}'"]{0,}$/
        return !reg.test(val)
      },
      input (val) {
        this.errorInput = this.isErrorValid(val)
        this.$store.commit('reserveInfo', {
          cacheValue: val
        })
      },
      edit () {
        this.autoFocus()
        this.readonly = false
      },
      confirm () {
        if (!this.errorInput) {
          this.readonly = true
          console.log('确认')
          this.saveHttpData()
        }
      }
    }
  }
</script>

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

<template>
  <div class="prompt">{{inputValue}}</div>
</template>

<script>
  import mixins from './mixins'
  export default {
    name: 'homeTips',
    mixins: [mixins],
    data () {
      return {
      }
    }
  }
</script>

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

<template>
  <div class="ms-home">
     <div>欢迎{{reserveInfo}}</div>
  </div>
</template>
<script>
 import mixins from '@/base/components/reserveInfo/mixins'
 export default {
    name: 'ms-home',
    mixins: [mixins],
    created () {
       // 请求预留信息
       this.getHttpData()
    }
 }
</script>

使用HomeTips组件 

<template>
  <div class="ms-home">
     <HomeTips></HomeTips>
  </div>
</template>
<script>
import HomeTips from '@/base/components/reserveInfo/homeTips'
components: {
   HomeTips
},
created () {}

</script>