【已解决】vuejs中想办法把公共函数提取出来

export function getRandomIntInclusive(min, max) {
  // 返回随机值 含最大值，含最小值
  min = Math.ceil(min)
  max = Math.floor(max)
  console.log('min=%s, max=%s', min, max)
  const randomValue = Math.floor(Math.random() * (max - min + 1)) + min
  console.log('randomValue=%s', randomValue)
  return randomValue
}


export function visibleValue(isVisible) {
  console.log('isVisible=%o', isVisible)
  const curVisibleValue = isVisible ? 'visible' : 'hidden'
  console.log(`${isVisible} -> ${curVisibleValue}`)
  return curVisibleValue
}

src/client/xxxClient/src/views/dashboard/index.vue

export default {
  name: 'Dashboard',
  timer: '',
  // isNxmleVisibie: false,


  data: () => {
    return {
      // isNxmleVisibie: true
      isNxmleVisibie: false
      // nxmleVisibility: 'hidden'
    }
  },


  computed: {


    nxmleVisibility: () => {
      console.log('into computed nxmleVisibility')
      console.log('this.isNxmleVisibie=', this.isNxmleVisibie)
      // return this.visibleValue(this.isNxmleVisibie)
      return visibleValue(this.isNxmleVisibie)
    },


  methods: {


    stopUpdate() {
      clearInterval(this.timer)
    },


    getRandom01() {
      // return this.getRandomIntInclusive(0, 1)
      return getRandomIntInclusive(0, 1)
    },


    updateSwitchStatus() {
      const curRandom = this.getRandom01()
      console.log('updateSwitch: ', curRandom)
    }
  }
}

结果报错，回去继续：

【已解决】vuejs中computed中调用methods函数报错：TypeError Cannot read property visibleValue of undefined

解决了后，最后就可以了。

【总结】

把公共函数放到单独文件里：

src/client/xxxClient/src/utils/util.js

  console.log('isVisible=%o', isVisible)
  const curVisibleValue = isVisible ? 'visible' : 'hidden'
  console.log(`${isVisible} -> ${curVisibleValue}`)
  return curVisibleValue
}


export function getRandomIntInclusive(min, max) {
  // 返回随机值 含最大值，含最小值
  min = Math.ceil(min)
  max = Math.floor(max)
  console.log('min=%s, max=%s', min, max)
  const randomValue = Math.floor(Math.random() * (max - min + 1)) + min
  console.log('randomValue=%s', randomValue)
  return randomValue
}


export function getRandom01() {
  // return this.getRandomIntInclusive(0, 1)
  return getRandomIntInclusive(0, 1)
}

然后别的vuejs文件，导入即可使用：

src/client/xxxClient/src/views/dashboard/index.vue

...

import { mapGetters } from 'vuex'
import { visibleValue, getRandom01 } from '../../utils/util'

export default {
...

  data: () => {
    return {
      isNxmleVisibie: false

  },


  computed: {

    nxmleVisibility: {
      // getter
      get: function() {

      }
    },


    ...mapGetters([
      'name'
    ])
  },
...

即可。

转载请注明：在路上 » 【已解决】vuejs中想办法把公共函数提取出来

【已解决】vuejs中想办法把公共函数提取出来

与本文相关的文章

Hi，您需要填写昵称和邮箱！