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 }} this.Он работает нормально, но My Issue axios.get('') срабатывает 4 раза, когда загрузка страницы [в консоли]

Теперь, как я могу вызвать это только один раз илиЛюбое альтернативное предложение будет оценено, если вы сделаете это, если объясните на примере [Как я новичок в Vue]

Answer 1

Действие в компоненте Vue.js запускается один раз для каждого компонента.

Поскольку вы используете смонтированную функцию, каждый компонент будет выполнять вызов axios при монтировании.

Чтобы избежать этого, используйте менеджер состояний и определите общее состояние для всех компонентов.В этом менеджере состояний вы также можете определить общие функции.Vue.js опубликовал библиотеку для этого с именем VueX .

Затем вы можете записать результат аксиосов в общее хранилище и получить к нему доступ из каждого компонента.

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

  }
};

Answer 3

Вы используете global mixin , что означает, что каждый компонент в вашем приложении будет выполнять этот вызов axios get при подключении.Так как на вашей странице есть несколько компонентов, неудивительно, что звонок совершается несколько раз.Здесь вам нужно либо:

1) создать обычный миксин и использовать его только в компоненте master / container / page на каждом маршруте, который фактически должен извлекать данные, предоставив опцию mixins: [yourMixinsName],Затем этот компонент может обмениваться данными с другими компонентами на странице.

2) Если ваши данные общие для страниц, лучше использовать глобальное хранилище, такое как Vuex , чтобы упростить состояниеуправление.

На заметку : Обычно лучше обрабатывать инициализацию данных в хуке created.Обработка его в хуке mounted может привести к некоторым подводным камням, которые включают в себя повторные вызовы, среди прочего, из-за порядка выполнения хуков родительского / дочернего жизненного цикла.Пожалуйста, обратитесь к этой статье для получения дополнительной информации по этому вопросу.