Как в Vuex передать данные типа this.$route.params.id?

Question

[nastya_zholudeva]

Есть такой запрос к REST API.

queryParams['brend_id'] = this.$route.params.subid;

                callApi('prod_cat', queryParams, '').then((res) => {
                    if (res.data.data.length) {
                        this.categories = res.data.data;
                        for (var i = 0, max = this.categories.length; i < max; i++ ) {
                            if (this.categories[i].id == this.$route.params.id) {
                                this.currentCategory = this.categories[i]
                            }
                        }
                    }
                })

callApi - функция, делающая запрос к REST API
prod_cat - URL‐путь
queryParams - это параметры после URL‐пути.

Только начала знакомиться с VUEX и мне нужно теперь все данные получать с помощью него.
Есть запросы без this.$route.params.subid, с ними более-менее понятно как работать. А вот как делать запросы, где нужно знать параметры текущей страницы сайта совсем не понятно.

Answer 1

[Ilya]

Вы ведь делаете экшен из компонента? передайте ей этот параметр

Comments

[nastya_zholudeva]

Ilya, как-то так?

methods: {
        addNew() {
var parID = this.$route.params.subid;
            this.$store.dispatch('addNote', parID)
        }
    }

а в самом vuex

export const actions = {
    fetchCat (state, parID) {
        queryParams['brend_id'] = parID;

                callApi('prod_cat', queryParams, '').then((res) => {
                    if (res.data.data.length) {
                        this.categories = res.data.data;
                        for (var i = 0, max = this.categories.length; i < max; i++ ) {
                            if (this.categories[i].id == this.$route.params.id) {
                                this.currentCategory = this.categories[i]
                            }
                        }
                    }
                })
}

/code>

[Алексей Ярков]

Только сразу приучайтесь в экшене принимать объект в аргументе. Иначе вы больше одного аргумента не передадите. Типа такого

const actions = {
    action (context, { id, limit }) {
        return axios.get(`/api/v1/posts/${id}`, { params: { limit } })
                           .then(res => console.log(res.data))
    }
}

[nastya_zholudeva]

Алексей Ярков, Спасибо большое

[Ilya]

nastya_zholudeva, Да так, только пользуйтесь советом Алексей Ярков

[nastya_zholudeva]

Ilya, спасибо вам большое

[nastya_zholudeva]

Ilya, Алексей Ярков, подскажите пожалуйста, как поступить, если у меня если один и тот же запрос, но в then разное "тело". При этом те объекты и переменные, которые внутри этого тела есть, я потом использую дальше и в коде, и в верстке

callApi ('brends', queryParams,'').then((res) => {
                        this.brends = res.data.data;
                        var countItem = res.data.count_item;
                        this.numberOfPage = Math.ceil(countItem / lim);
                    })

callApi ('brends', queryParams,'').then((data) => {
                        if (data.data.data.length) {
                            this.brends = data.data.data;
                        }
                    });

[Алексей Ярков]

nastya_zholudeva, вынести этот запрос в функцию и использовать. А вообще странный кейс, не сталкивался с таким.