VueJS Components 共用數據

有時候不同 components 之間有少量數據希望共用，但又不想用到 Vuex 這麼麻煩的話，有比較方便的做法可以使用。就是使用 VueJS 的 Global Mixins 來儲放 data 了。

Global Mixins 的用法

簡單來說就是把平時放在 export default 中的 data 搬到 Vue Minins 中。

例如我有一些 data

export default {
    data {
        name: 'Hello'
        text: 'World'
        }
    }

如果是使用 main.js 作入口的話就在 new Vue 前加入 (一定要在 new Vue前)

Vue.mixin({
    data {
        name: 'Hello'
        text: 'World'
        }
    })

這樣只要在任何 components 中加上 this 就可以讀取 mixin 中的 data

{{this.name}} {{this.text}}
Hello World

節省了重覆使用相同 data 的資源，設定也很簡單。除了 data 外，methods / computed 等原本在 export default 中的原素也可以搬到 mixin 中供其他 components 使用。