最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

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

JS crifan 396浏览 0评论
折腾:
【已解决】vuejs中computed中调用methods函数报错:TypeError Cannot read property visibleValue of undefined
期间,希望把此处几个常用的函数,从当前vuejs提取出来,作为公共函数。
那算了,想办法把公共部分的函数提取出来
然后此处computed中调用公共函数
vue.js common method
Common Methods in Vue – Get Help – Vue Forum
Mixins — Vue.js
Plugins — Vue.js
Share functions between files – General Discussion – Vue Forum
How to use helper functions for imported modules in vuejs .vue template? – Get Help – Vue Forum
Possible to call external Javascript functions with VueJS? – Get Help – Vue Forum
Call method in App.vue from window/global scope – Get Help – Vue Forum
混入 — Vue.js
javascript – How can I share a method between components in Vue.js? – Stack Overflow
放到:export default
试试
src/client/xxxClient/src/utils/util.js
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中想办法把公共函数提取出来

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
88 queries in 0.104 seconds, using 20.62MB memory