Question

我正在尝试返回商品ID，并转到该ID的详细信息页面。我做了下面的事情。但是最后它不起作用...在控制台中弹出一个错误，并指出：

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;
        }
    }
}

链接到文章ID

<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);
},

按ID返回文章-vue路由器，vuex

1 个答案: