在 Laravel 5.7 中多次触发 vueJS mixin

Question

我是 Vue jS [版本 2] 的新手。我的页面中有 3 个组件。我想使用 axios 获取所有页面中可用的数据。我在我的app.js

const router = new VueRouter({mode: 'history', routes });
Vue.mixin({
data: function () {
        return {
          pocketLanguages: [],

        }
    },
mounted() {
       var app = this;
       axios.get("/get-lang")
            .then(function (response) {
                app.pocketLanguages = response.data.pocketLanguages;
        })
    }
})

const app = new Vue({ 
    router,
}).$mount('#app');

并pocketLanguages在像这样的组件中使用它

{{ pocketLanguages.login_info }}这个。它工作正常，但我的问题axios.get('')在页面加载时触发了 4 次 [在控制台中]

现在，如果用示例进行解释，我如何仅触发一次或任何其他建议来执行此操作[因为我是 Vue 新手]

Answer 1

您正在使用全局 mixin，这意味着您的应用程序中的每个组件都将在get安装时进行该 axios调用。由于您的页面中有多个组件，难怪会多次调用。您需要在这里做的是：

1）创建一个普通的mixin，并且只在每个路由中的master/container/page组件中使用它，通过提供option来实际需要获取数据mixins: [yourMixinsName]。然后该组件可以与页面中的其他组件共享数据。

2) 如果你的数据在页面之间是通用的，那么最好使用全局存储，比如Vuex来简化状态管理。

附带说明：通常最好在created钩子中处理数据初始化。mounted由于父/子生命周期钩子的执行顺序，在钩子中处理它可能会导致一些陷阱，包括重复调用等。有关该主题的更多信息，请参阅本文。