Vue.js:アロー演算子を使うタイミング

Vue.jsで「アロー演算子」を使うタイミングが分からないなと思ったので、
このパターンが来たら、アロー演算子の出番だよ。と言うタイミングをメモっておいた。

data: function () {  //←function()
  return {           //←return
    count: 0
  }
}

出た！このパターンがきたら、アロー演算子を使う。

data: () => ({
  count: 0
})

スッキリする！

computed:{
  hoge:{
    get: function(){  //←function()
      return this.$store.getters.hoge //←return
    }
    set: function(val){
      this.$store.dispatch('setHoge',val)
    }
  }
}

このパターンが来たらアロー演算子

computed:{
  hoge:{
    get() => (
      this.$store.getters.hoge
    )
    set(val){
      this.$store.dispatch('setHoge',val)
    }
  }
}

スッキリする。

getFilteredCity:{
  get: function(){  //←function & return
    return this.citys.filter(function(City){  //←function & return  
      return (City.pref.indexOf(this.prefCode) !== -1 && (City.pref == this.prefCode || this.prefCode == ''))
      }
    }
  }
},

フィルタ関数のこのパターンも

getFilteredCity:{
  get() => (
    this.citys.filter(
      (City) => (City.pref.indexOf(this.prefCode) !== -1 && (City.pref == this.prefCode || this.prefCode == '')
    ) 
  )
},

こんなにスッキリする。

watch:{
  meta(){
    this.$emit('updateHead')
    setTimeout( funtion(){
      this.getStoreLoading(false)
    }, 1000);
  },
},

setTimeoutも。

watch:{
  meta(){
    this.$emit('updateHead')
    setTimeout(() => {
      this.getStoreLoading(false)
    }, 1000);
  },
},

ちょっとスッキリする。

でもPrettierとかESLintで--fixを設定してると…

勝手に直してくれるから、勝手にイケてる感じにしてくれる。

Babelのプラグイン

自動で直す設定にしておくと、ドンドンイケてる感じに直って行くので、
babel.config.jsに、プラグインを入れておいたほうが良いと思います。

module.exports = {
  presets: ["@babel/preset-env"],
  overrides: [
    {
      presets: [
        ["@babel/preset-env", { targets: { ie: "11" } }],
      ],
      plugins: [
        '@babel/plugin-transform-arrow-functions', //←これ
      ]
    }
  ],
}

以上です。