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

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

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

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

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

Answer 2

每个组件触发一次Vue.js组件中的操作。

因为您正在使用已安装的功能，所以每个组件都会在安装时执行axios调用。

避免这种情况的一种方法是使用状态管理器并为所有组件定义共享状态。 在此状态管理器中，您还可以定义共享功能。 Vue.js已经发布了一个名为VueX的库。

然后，您可以在共享存储中写入axios的结果，并从每个组件中访问它。

Answer 3

终于问题解决了

在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();
    }

和我的/resources/js中的translation.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;
              }); 
   }

  }
};