Как реализовать хранение данных пользователя используя Vuex?

Question

[Cathari]

Делаю todo лист Laravel + Vue + Vuex + API. Хочу положить все данные о пользователе в store. не понимаю как сформировать url (а точнее как взять id пользователя) в actions, вот собственно код:

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

Vue.use(Vuex)

let store = new Vuex.Store({
    state: {
        user:[],
    },
    mutations: {
        SET_USER_TO_STATE:(state, user) => {
            state.user = user;
        }
    },
    actions: {
        GET_USER({commit}) {
            return axios('/api/users/{user}', {   //вот url из роутов, но соответственно как сюда id авторизированного пользователя передать
                method: "GET"
            })
                .then((user) => {
                    return user;
                    commit('SET_USER_TO_STATE', user.data);
                })
                .catch(error => {
                console.log(error);
                    return error;
            })
        }
    },
    getters: {
        USER(state) {
            return state.user;
        }
    },

})

export default store;

Comments

[Сергей delphinpro]

А зачем передавать id авторизованного пользователя, если система и так уже его знает?

Вот например кусок серверного апи у меня

Route::middleware('auth:api')->group(function () {
            Route::get('/user', function (Request $request) {
                return $request->user();
            });
});

Просто делаю запрос на /api/user и получаю данные текущего пользователя.

[Cathari]

Сергей delphinpro, мм в роутах тоже есть такое дело, поменял url на /api/user? но state все равно пустой..

Answer 1

[WapSter]

Вторым параметром передай payload в котором будет храниться id пользователя

Comments

[Cathari]

не понимаю как мне вложить id в второй параметр...

[WapSter]

Cathari, вроде по русски написал. Ладно вот код

GET_USER({commit}, payload) {
            return axios(`/api/users/${payload.user}`, {   //вот url из роутов, но соответственно как сюда id авторизированного пользователя передать
                method: "GET"
            })
            // ...
}

Вызов
this.$store.dispatch('GET_USER', {user: id})

[Cathari]

сделал так...

actions: {
        GET_USER({commit}, payload) {
            return axios(`/api/users/${payload.user}`, {
                method: "GET"
            })
                .then((user) => {
                    commit('SET_USER_TO_STATE', user.data);
                    return user;
                })
                .catch(error => {
                console.log(error);
                    return error;
            })
        }
    },

в компоненте вот так..

export default {

        props: [
            'id'
        ],

        data() {
            return {
                avatar:'',
            }
        },

        mounted() {
            this.getUser()
        },

        methods: {
            getUser() {
                this.$store.dispatch('GET_USER', this.id)
            }
        }

    }

все равно state пустой (( или я не так понял?...

[WapSter]

Cathari, чувак учи js ты даже не знаешь как передать объект. Передаешь строку, а обращаешься к свойству. Не this.id, а {user: this.id} я же даже пример написал.

[Cathari]

WapSter, спс, так я и не говорил что я гуру)