Laravel 拉威尔+；Vue.js-如何拥有全局变量？

我有一个使用Laravel和Vue.js的项目。我想不把它们分开不是最好的办法，但我们从错误中吸取教训；） 以下是它的工作原理：

我一直在努力放置全局变量，比如“当前用户”。现在，每当我需要/currentuser时，我都会通过axios调用它，或者我把它放在道具中，但它让我疯狂。。。我怎样才能使它全球化？ 我想知道Vuex是否可以在我的项目中工作，因为所有东西都是从Laravel调用的，路线也是

我在app.js中尝试了几种方法（这里有两种，混合）：

在TestComponent.vue中

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

test.blade.php

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

@endsection


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

@extends（'template'））
@节（'pageTitle'，'test'）
@节（“内容”）
@端部
web.php
路由：：get（'/test'，函数（）{
返回视图（“测试”）；
});

您可以使用vuex访问当前经过身份验证的用户：

在

app.js

上：

从“Vue”导入Vue；
从“./store”导入存储；
const app=新的Vue({
el:“#应用程序”，
商店，
i18n，
组件：{test}，
创建（）{
store.dispatch（'getUser'）；
}
});

store.js

：

从“Vue”导入Vue
从“Vuex”导入Vuex
Vue.use（Vuex）；
导出默认的新Vuex.Store({
声明：{
用户：{}，
},
吸气剂：{
user:state=>state.user，
},
突变：{
设置用户（状态，用户）{
state.user=用户；
},
},
行动：{
getUser（{commit}）{
返回新承诺（（解决、拒绝）=>{
axios.get（“/currember”）
。然后（结果=>{
提交（'setUser'，result.data）；
解决（）；
})
.catch（错误=>{
拒绝（error.response&&error.response.data.message | |“error.”）；
});
});
},
}
})

测试

组件：

{{currentUser}}
导出默认值{
计算：{
当前用户（）{
返回此。$store.state.user；
}
}
};

您是否建议使用此方法存储全局设置？关于

mixin

或

Vue.prototype

？@EugenevanderMerwe是的，这是存储全局设置的标准方法，尤其是当您想要获取/设置全局设置或使用异步操作时。我个人使用prototype来存储全局常量/静态值。谢谢@hafez divandari，我只处理静态值，所以不需要getter或setter。我最大的挑战是我不想每天都发出设置API请求。如果你想像其他人一样发表评论的话，我也在这里的Laracasts上记录了这个。

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

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

@endsection


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