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', 
    ...