Laravel + Vue.js - 如何拥有全局变量？

Question

我有一个使用 Laravel 和 Vue.js 的项目。我想不将它们分开并不是最好的主意，但我们从错误中吸取教训；)其工作原理如下:

我一直在努力尝试放置全局变量，例如“当前用户”。现在，我每次需要时都会通过 axios 调用/currentuser，或者将其放入 props 中，但这让我发疯......我怎样才能使其成为全局性的？我想知道 Vuex 是否可以在我的项目中工作，因为一切都是从 Laravel 调用的，路线也是如此......

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

测试.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.');
                    });
            });
        },
    }
})

测试组件:

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

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