Laravel + Vue. js - как получить глобальную переменную?

Question

У меня есть проект, использующий Laravel и Vue. js. Я думаю, что это не лучшая идея не разделять их, но мы учимся на своих ошибках;) Вот как это работает:

Я изо всех сил пытался поставить глобальные переменные, такие как «текущий пользователь» , Теперь я звоню / currentuser через ax ios каждый раз, когда мне это нужно, или я помещаю это в подпорки, но это сводит меня с ума ... Как я могу сделать это глобальным? Мне интересно, может ли Vuex работать в моем проекте, так как все вызывается с Laravel, а также с маршрутами ...

Я попробовал несколько вещей в приложении. js (вот 2 из них , смешанный):

var curruser=null;

axios.get('/currmember').then(
    response => {
        curruser=response.data;
    }
);

Vue.mixin({
    methods: {

    },
    data: function() {
        return {
          myvaiable: '', //this doesn't work eather
          get currentUser() {
            if(curruser==null){
                axios.get('/currmember').then(
                    response => {
                        curruser=response.data;
                        return curruser;
                    }
                );
            }
            return curruser;
          }
        }
      }
});}

в TestComponent. vue

<template>
  <div>
    {{currentUser}}
    {{myvariable}} <!-- none of them display anything -->
  </div>
</template>

Вот как все работает (очень сильно упростить их):

app. js

import Vue from 'vue';
window.Vue = require('vue');

var App = Vue.component('app', require('./App.vue').default, {
    name: 'app'
}); 
var shol = Vue.component('test', require('./components/TestComponent.vue').default); 

let lang=localStorage.Lang!=null?localStorage.Lang:'fr';// = document.documentElement.lang.substr(0, 2); 
init();


function init(){

    const app = new Vue({
        el: '#app',
        i18n,
        components:{test
       }
    });

    var curruser=null;

    axios.get('/currmember').then(
        response => {
            curruser=response.data;
        }
    );


    Vue.mixin({
        methods: {

        },
        data: function() {
            return {
                currentUser: 'blabla',
              get currentUser2() {
                if(curruser==null){
                    axios.get('/currmember').then(
                        response => {
                            curruser=response.data;
                            console.log(curruser);
                            return curruser;
                        }
                    );
                }
                return curruser;
              }
            }
          }
    });}

test.blade. php

@extends('template')
@section('pageTitle', 'test' )
@section('contenu')
    <div >
        <test></test>
    </div>

@endsection


web.php
Route::get('/test', function () {
    return view('test');
});

Answer 1

Вы можете использовать vuex для доступа к текущему аутентифицированному пользователю:

Вкл. app.js:

import Vue from 'vue';
import store from './store';

const app = new Vue({
    el: '#app',
    store,
    i18n,
    components:{ test },
    created() {
        store.dispatch('getUser');
    }
});

store.js:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        user: {},
    },
    getters: {
        user: state => state.user,
    },
    mutations: {
        setUser(state, user) {
            state.user = user;
        },
    },
    actions: {
        getUser({ commit }) {
            return new Promise((resolve, reject) => {
                axios.get('/currmember')
                    .then(result => {
                        commit('setUser', result.data);
                        resolve();
                    })
                    .catch(error => {
                        reject(error.response && error.response.data.message || 'Error.');
                    });
            });
        },
    }
})

test компонент:

<template>
  <div>
    {{ currentUser }}
  </div>
</template>

<script>
export default {
    computed: {
        currentUser() {
           return this.$store.state.user;
        }
    }
};
</script>