Question

我有一个带有单个文件组件的小型Laravel / VueJS应用程序，它是一个单页面应用程序。我使用vue-stash进行中央国家管理。

这是我的store.js

export default {
    user: {
        name: null
    }
}

这是我的仪表板上的api电话。

<script>
    export default {
        mounted() {
            axios.get('/api/getAuthUser')
                    .then(response => {
                        this.$store.user.name = response.data.name;
                    });
        }
    }
</script>

这很好用，它会将商店中的用户名设置为我从api调用中获得的用户名。

但是如果第一次访问我的网站不是仪表板，那么就没有api调用，并且商店中没有设置名称。但我在我的应用程序中的不同位置需要该名称。

我不会从每个组件中调用我的api。是否可以直接从我的商店调用api一次？我该怎么做？还是有更好的解决方案？

谢谢！

//更新

有没有办法从store.js直接打电话？

export default {
user: {
    name: null
},
ready () {
    axios.get('/api/getAuthUser')
        .then(response => {
            this.user.name = response.data.name;
        });
    }
}

这不起作用。名称仍为空

//更新2

import axios from 'axios'

axios.defaults.headers.common = {
    'X-CSRF-TOKEN': Laravel.csrfToken,
    'X-Requested-With': 'XMLHttpRequest'
};



export default {
    user: {
        name: null
    },
    setUser() {
        axios.get('/api/getAuthUser')
        .then(response => {
        this.user.name = response.data.name;
    });
}}

这是我的完整store.js，但似乎setUser（）没有被执行。

Answer 1

如果您在每个页面都需要您的用户，那么这样的事情呢？

new Vue({
   el: "#app",
   mounted: function() {
     // make a request to the api here
   },
});

来自Laravel API的Vuejs全局用户对象

1 个答案: