Как правильно сделать запрос через Vuex?

Question

[Алекс]

Добрый день, есть компонент и в нем запрос через axios к api и получение данных id юзера

<template>
    <li class="state_account_id">
        ID: {{params.id}}
    </li>
</template>

import axios from 'axios'
    export default {
        name: 'IdWeb',
        data () {
            return {
                params:null
            }
        },
        mounted() {
            axios
                .get('/information/account')
                .then(response => (this.params = response.data));
        }
    }

Есть подключенный store vuex

import Vue from 'vue'
import axios from 'axios'
import vuex from 'vuex'
Vue.use(vuex, axios);

export default new vuex.Store({
    state: {
    },
    actions: {
    }
});

Собственно вопрос как сделать запрос через vuex и вывести id в компоненте.Спасибо

Answer 1

[Сергей delphinpro]

Сделать экшн, в котором выполнить запрос.

actions.loadMenu     = async ({ commit, state }, payload) => {
    if (!state.menus[payload.menu] || payload.force) {
        let response = await Vue.axios.get('/menu/' + payload.menu);
        if (response.status === 200) {
            commit('setMenu', { menu: payload.menu, data: response.data });
        }
    }
};

UPDATE:

store.js

import axios from 'axios';
export default new vuex.Store({
    state: {
        params: null,
    },
    mutations:{
        setParams(state, payload){
            state.params = payload;
        }
    },
    actions: {
        async getParams({comit, state}){
            let response = await axios.get('information/account');
            if (response.status === 200) {
                commit('setParams', response.data);
            }
        }
    }
});

IdWeb.vue

import { mapState } from 'vuex';
export default {
    name: 'IdWeb',
    computed: {
        ...mapState([
            'params'
        ])
    },
    mounted() {
        this.$store.dispath('getParams');
    },
}

<template>
    <li class="state_account_id" v-if="params">
        ID: {{params.id}}
    </li>
</template>

Comments

[Алекс]

Так как я начинающий в vue, напишите поподробней пожалуйста, если вас не затруднит.Мне нужно получить данные id из объекта data как в компоненте но с помощью vuex.Как именно прописать actions: {} и как вывести в компонент

[Сергей delphinpro]

Алекс, Обновил ответ

[Алекс]

Сергей delphinpro, Спасибо большое, будем разбираться