Question

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

我有一个用Webpack @ NPM编译的Vue应用程序。我使用mixin在所有组件之间传播属性（roles）。我通过应用程序实例化的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生命周期挂钩中执行此操作，该挂钩在mixin上调用getRoles，但在组件Foo中不调用它，因此它将具有其默认的空值。 roles属性是不共享的，每个组件都会获得自己的副本，并且需要填充。

您可以通过添加生命周期created钩子（如在根实例中所做的那样）来更改mixin为您执行此操作。 Here's就是一个例子。请注意，在混入中实现并不会阻止或覆盖以后的生命周期挂钩在合并到其上的实例上运行。但是，在您的情况下，它会为所创建的每个组件实例进行API调用，这可能是不希望的。

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

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

1 个答案: