mixinでグローバル定義【Vue.js】
mixinを使うことで、どのコンポーネントでも「this.~」の形で、関数や変数computedなどを利用することができます。
下記のようにmixinsフォルダを作成し、その下にjsファイルを作成した方が管理しやすいでしょう。
build config src ... mixins globalValiables.js xxxxx.js
globalValiables.js
export default { // exportする created() { console.log('start! from mixins.') // 起動後必ずログが出力される }, data() { return { serverPass: "https://localhost:10443/", // サーバーサイドのパスを定義 } }, methods: { logging() { console.log('logging from mixins.') } }, computed: { twoBytwo() { return 2 * 2 } } }
このように、methodsやdataだけでなく、computedやcreatedも定義することができます。
このファイルを、インスタンス作成前にmixinに登録します。
main.js
import gv from '../mixins/grobalValiables' Vue.mixin(gv) // mixinに登録 new Vue({ el: '#app', router, components: { App }, template: '<App/>', })
こうすると、次のように「this.~」の形で利用することができます。
xxx.vue
this.logging() console.log(this.twoBytwo) axios.post(this.serverPass + 'ax', ...