代码之家 › 专栏 › 技术社区 › Rejoanul Alam

vueJS mixin在laravel 5.7中多次触发

vue.js laravel-5 laravel javascript

1

Rejoanul Alam · 技术社区 · 7 年前

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]

3 回复 | 直到 7 年前

1

5

Husam Ibrahim 7 年前

您正在使用 global mixin get 挂载后打电话。由于您的页面中有多个组件,难怪会多次调用。您需要做的是:

mixins: [yourMixinsName] . 然后该组件可以与页面中的其他组件共享数据。

2) 如果您的数据在页面之间是公共的,那么最好使用全局存储,例如 Vuex

旁注 :通常最好在 created mounted 由于父/子生命周期钩子的执行顺序,钩子可能导致一些陷阱,其中包括重复调用。请参阅 this article 更多关于这个主题的信息。

2

-1

Rejoanul Alam 7 年前

问题终于解决了

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

  }
};