时间戳

首页 > 解决方案 > axios 使用 vuex 获取文章 id

javascript - axios 使用 vuex 获取文章 id

问题描述

试图到达文章的 id 并获取它。但是在某个地方我犯了一些错误。因为 vuex 返回空对象并且 router-link 失败。

到目前为止，我做了一些类似下面的东西。

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 的数据没有问题。只是卡住了 axios 部分。我怎样才能到达id？

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

标签： javascriptvue.jsvuex

解决方案

好吧，花了一些时间才弄清楚。并且不确定这是最好的方法，但它现在正在工作。

我将如下所示的路由链接设置为转到 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
    });
},

推荐阅读