возвращение статьи по id - vue router, vuex

Question

Я пытаюсь вернуть идентификатор статьи и перейти на страницу с подробностями этого идентификатора.Я сделал что-то вроде ниже.Но, в конце концов, это не работает ... в консоли появляется ошибка, указывающая, что:

api / v1 / article [object% 20Object]: 1 Не удалось загрузить ресурс:сервер ответил со статусом 404 (не найдено)

Мне нужна помощь, потому что я здесь немного потерян ... Чего мне здесь не хватает?что я делаю не так?

Vuex

export const articles = {
    state: {
        article: {},
    },

    mutations: {
        setArticle(state, article){
            state.article = article;
        },
    },
    getters: {
        loadArticle(state){
            return state.article;
        },
    },
    actions: {
        getArticle(id){
            axios.get("api/v1/article" + id)
            .then(response => {
                this.commit('setArticles', response.data);
            })
            .catch(error => {
                console.log(error);

            })
        },
    }
}

Маршруты

{
    path: "detail/:id",
    name: "detail",
    component: Vue.component("Detail", require("./pages/Detail.vue").default),
    meta: {
        requiresAuth: true
    }
},

Компонент статьи

export default {
    components: {
        maps,
    },
    data(){
        return {

        };
    },
    created(){
        this.$store.dispatch( 'getArticle', {
            id: this.$route.params.id
        });
    },
    computed: {
        article(){
            return this.$store.getters.loadArticle;
        }
    }
}

Ссылка на номер статьи

<router-link :to="{ name: 'detail', params: { id: item.id } }">詳細を見る</router-link>

Answer 1

Обновление

Первым parameter действием для сохранения являются сами свойства магазина.По этой причине вы получаете объект store.Вам нужно получить id или любую полезную нагрузку в качестве второго параметра.

actions: {
        getArticle({ commit }, id){
            axios.get("api/v1/article" + id)
            .then(response => {
                commit('setArticles', response.data);
            })
            .catch(error => {
                console.log(error);

            })
        },
    }

Здесь вы видите это

created(){
        this.$store.dispatch( 'getArticle', {
            id: this.$route.params.id
        });
    },

Вы передаете object в качестве параметра-

{
   id: this.$route.params.id
}

Вы должны сделать это вместо -

created(){
   this.$store.dispatch( 'getArticle', this.$route.params.id);
},