vuex를 사용하여 Axi에서 기사 ID 가져오기

vuex를 사용하여 Axi에서 기사 ID 가져오기

아티클의 ID에 접속하여 가져오려고 합니다.하지만 어딘가에서 나는 실수를 한다.vuex가 빈 개체를 반환하고 라우터 링크가 실패하기 때문입니다.

지금까지 제가 만든 건 다음과 같은 거.

state: {
    article: {},
},

getters: {
    bringArticle(state){
        return state.article;
    }
},

mutations: {
    updateArticle(state, article){
        state.article = article;
    }
},

actions: {
    getArticle(context, id){
        axios.get("/api/articles/" + id)
        .then((response) => {
            context.commit("updateArticle", response.data);
            console.log(response.data)
        })
        .catch((error) => {
            console.log(error);
        })
    }
}

분명히 이건axios.get("/api/articles/" + id)일이 잘 안 풀려요...

그나저나.엔드포인트에서 ID 데이터를 문제없이 볼 수 있습니다.공리 부분만 골랐어요ID는 어떻게 하면 됩니까?

Route::get("/articles/{id}", "Api\ArticlesController@singleArticle");

알아내는 데 시간이 좀 걸렸어요그게 최선의 방법인지는 모르겠지만, 지금은 효과가 있어요

ID로 이동하기 위해 다음과 같이 루트 링크를 설정합니다.

<router-link :to="{ name: 'detail', params: { id: article.id} }">

그리고 나서 나는api.js콜을 파일화하여 내보냅니다.

var apiUrl = "api/articles/";

export default {

    getArticles: function(){
        return axios.get(apiUrl);
    },

    getArticle: function( id ){
        return axios.get(apiUrl + id);
    },

}

내 안에store.js액션 커밋을 다음과 같이 변경했습니다.

getArticle( { commit }, data ){
    path.getArticle( data.id )
    .then( function( response ){
        commit( 'setArticle', response.data );
    })
    .catch( function(){
        console.log(error)
    });
}, 

마지막으로 디스패치합니다.Detail.vue

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

언급URL : https://stackoverflow.com/questions/56610818/get-article-id-by-axios-with-vuex