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

vueJS mixin在laravel 5.7中多次触发

vue.js laravel-5 laravel javascript

Rejoanul Alam · 技术社区 · 6 年前

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 回复 | 直到 6 年前

Husam Ibrahim 6 年前

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

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

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

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

-1

Rejoanul Alam 6 年前

问题终于解决了

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

  }
};

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

2 年前