javascript - vueJS mixin 在 laravel 5.7 中多次触发

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

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

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

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

旁注:通常最好在 created Hook 中处理数据初始化。在 mounted Hook 中处理它可能会导致一些陷阱，其中包括重复调用等，这是由于父/子生命周期 Hook 执行顺序造成的。请引用this article有关该主题的更多信息。