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

debugcn 发表于 Dev

马克西斯

我有一个使用Laravel和Vue.js的项目。我想不分开它们不是最好的主意，但是我们可以从错误中学习；）这是它的工作原理：

我一直在努力放置全局变量，例如“当前用户”。现在，每次需要时，我都会通过axios调用/ currentuser，或者将它放在道具中，但是这让我发疯了……我如何才能使其全局化？我想知道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;
              }
            }
          }
    });}

test.blade.php

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

@endsection


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

哈菲兹·迪万达里（Hafez Divandari）

您可以使用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>