vueJS mixin在laravel 5.7中多次触发答案

【问题标题】：vueJS mixin trigger multiple times in laravel 5.7vueJS mixin在laravel 5.7中多次触发
【发布时间】：2019-03-12 22:46:57
【问题描述】：

我是 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('') 在页面加载 [in console] 时触发 4 次

现在我怎样才能只触发一次，或者如果用示例进行解释[因为我是 Vue 中的新手]，将不胜感激任何替代建议。

【问题讨论】：

标签： javascript laravel laravel-5 vue.js

【解决方案1】：

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

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

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

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

【讨论】：

您能否提供一个示例，如何在每条路线中添加 mixin？
只需创建一个 mixin 对象，如 these basic examples 所示。然后在需要在每个路由中获取和填充数据的组件的mixins 选项中提供它。

【解决方案2】：

问题终于解决了

在resources/js/components/LoginComponent.vue 文件中

<script>
import translator from '../translation';

export default {
    mixins:[translator],
    beforeCreate: function() {
        document.body.className = 'login-list-body';
    },
.....

mounted() {
        this.langTrans();
    }

还有我的translation.js 文件/resources/js

export default {
 data: function() {
  return {
    pocketLanguages: []
  };
},
methods: {
langTrans: function() {
    var self = this;
    axios.get('/get-lang')
              .then(function (response) {
                  self.pocketLanguages = response.data.pocketLanguages;
              }); 
   }

  }
};

【讨论】：