Edited at
Day 4

Vue.js使いだして2年くらい経ったけど、使ったことないAPIを使ってみる「グローバル設定」(1/2)


背景

把握してないAPIを学べばもっと適切に書ける場面ってあるんじゃ?と思い、学ぶことにした。

今回はグローバル設定の使い方を学ぶことにする。

とりあえず使ったこと無いものをリストアップしようとしたけど、全て使ったとことなかったので意味なかった。


グローバル設定API


silent


すべての Vue のログと警告を抑制します。


ってあるけど、ログと警告ってどれ?


警告

<div @click="hoge"></div>

といった感じで存在しないメソッドhogeを指定すると

こんな感じで警告が表示される。

そんな場合に、

Vue.config.silent = true;

を設定すると警告が表示されなくなる。


optionMergeStrategies

なんのことかさっぱりわからない、、、ミックスインの基本オプションのマージをまず理解しないと先に進めなさそう。


  • オプションのマージが起こるのはミックスインやVue.extendを使ったとき

  • オプションとはコンポーネントオプションのことでdataとかmethodsのことである

  • ミックスインとコンポーネントで重複した場合のルールがある



    • dataのときはコンポーネントが優先される


    • createdなどのフック関数は、ミックスインのフック関数が呼ばれてから、コンポーネントのフック関数が呼ばれる



Vue.config.optionMergeStrategies._my_option = function (parent, child) {

if (!parent) return child
if (!child) return parent

return parent + child // parent = 1, child = 10
}


mixins/index.js

export default {

_my_option: 1
}

としたときに、


App.vue

<template>

<div id="app">
{{ myOption }}
</div>
</template>

<script>
import mixin from './mixins'

export default {
name: 'App',
mixins: [mixin],
data () {
return {
myOption: this.$options._my_option
}
},
_my_option: 10
}
</script>


myOption11となる。

optionMergeStrategiesを設定しない場合、10となる。

_my_optionが重複してるのでコンポーネントの値が優先されるので。

コンポーネントの_my_optionを消すと、myOptionはもちろん1となる。

具体的な利用シーンは思い浮かばなかったが、、、


devtools


vue-devtools インスペクションを許可するかどうか設定します


と書いてある通り、

Vue.config.devtools = false

とすると



右端のVueが消えて、インスペクションが見られなくなります。


errorHandler


コンポーネントの描画関数とウォッチャにおいて未捕獲のエラーに対してハンドラを割り当てます。


とあるので、ウォッチャでエラーを吐いてみる。

const vm = new Vue({

data: {
message: ''
},
watch: {
message (val) {
tmp = val
}
}
})
vm.message = 'hoge';

とすると、以下の設定で

Vue.config.errorHandler = (err, vm, info) => {

console.error(err)
console.log(vm)
console.log(info)
};

以下のような出力となり、ちゃんとハンドリングできてる。


warnHandler


Main.vue


<template>
<div>main</div>
</template>

<script>
export default {
name: 'main'
}
</script>


こちらのコンポーネントを使うと

Vue.config.warnHandler = (msg, vm, trace) => {

console.warn(msg);
console.log(vm);
console.log(trace);
};

こちらの出力が



となる。

長くなったので一旦ここで終わり。