Vue Mixin 属性为空白/空/无反应

Question

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

我有一个使用 Webpack@NPM 编译的 Vue 应用程序。我使用 mixinroles在所有组件中传播一个属性 ( )。我使用来自应用实例化的 ajax 调用来更新它。问题roles只是<Root>组件的更新，而不是所有其他组件的更新。

////////////////////////

// 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();

    }

});

////////////////////////

//  Foo.vue

////////////////////////

<script>

    export default {

        mounted: function() {

            console.log(this.roles) ////// returns an empty array

        }

    }

</script>

你知道如何做出roles反应吗？

Answer 1

您创建的全局 mixin 不会调用填充roles属性的函数，它依赖于继承实例来执行此操作。在您的app“根”实例中，您在created调用getRolesmixin的生命周期钩子中执行此操作，但在组件中Foo您没有调用它，因此它将具有默认的空值。该roles属性不共享，每个组件都将获得它自己的副本，并且需要填充。您可以通过添加生命周期created挂钩来更改 mixin 来为您执行此操作，就像您在根实例中所做的那样。这是一个例子。请注意，在混入中实现这一点不会阻止或覆盖以后的生命周期钩子在它合并到的实例上运行。但是，在您的情况下，它会对创建的每个组件实例进行 API 调用，这可能是不可取的。如果您只想填充一次然后在所有组件之间共享它，那么使用 Vuex 并拥有一个roles集中填充并以反应方式在所有组件之间共享的全局状态可能更有意义。