Javascript Vue Mixin属性为空白/空/非反应性

我希望这个问题不是重复的。如果是这样，请告诉我正确的方向

我有一个Vue应用程序，它是用Webpack@NPM. 我使用mixin跨所有组件传播属性（

角色

）。我使用来自应用程序实例化的ajax调用来更新它。问题是

角色

仅更新

组件，而不是所有其他组件

////////////////////////
// app.js
////////////////////////

// import
window.axios = require('axios')
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes.js'

// mixin
Vue.mixin({
    data: function () {
        return {

            // property in question
            roles: [],
        }
    },

    methods: {
        getRoles: function() { //////////// this method updates property.
            // get
            axios.get('/api/vcr/admin/roles')

            // process
            .then(response=>{
                this.roles = response.data.data;
            })

            // error?
            .catch(error=>{
                this.toast(error.response.data.message);
            })
        },
    },
});

// router
const router = new VueRouter({
    mode: 'history',
    routes:  routes,
});

// app
const app = new Vue({
    el: '#app',
    components: { App: require('./views/App').default },
    router,
    base: '/saas/vcr/admin',

    created: function() { ////////////// I update it here
        this.getRoles();
    }
});

////////////////////////
//富维
////////////////////////
导出默认值{
挂载：函数（）{
console.log（this.roles）///返回一个空数组
}
}

---

你知道如何使

角色

被动吗

您创建的全局mixin不调用填充

角色

属性的函数，它依赖于继承实例来完成。在您的

应用程序
的“root”实例中，您在
创建的
生命周期钩子中执行此操作，该钩子在mixin上调用
getRoles
，但在组件
Foo
中，您没有调用它，因此它的默认值为空。
角色
属性未共享，每个组件将获得其自己的副本，需要填充

您可以通过添加生命周期
created
hook来更改mixin以实现这一点，就像您在根实例中所做的那样。这是一个例子。请注意，在mix-in中实现不会阻止或覆盖稍后的生命周期挂钩在其合并到的实例上运行。但是，在您的情况下，它会对创建的每个组件实例进行API调用，这可能是不可取的

如果只想填充一次，然后在所有组件之间共享，那么使用Vuex和全局状态（其中，
角色
集中填充，并以反应式方式在所有组件之间共享）可能更有意义

////////////////////////
//  Foo.vue
////////////////////////

<script>
    export default {
        mounted: function() {
            console.log(this.roles) ////// returns an empty array
        }
    }
</script>