使用vuex通过axios获取文章ID

时间:2019-06-15 13:30:58

标签: javascript vue.js vuex

试图获取并获取文章的ID。但是我在某个地方犯了一些错误。由于vuex返回空对象,并且router-link失败。

到目前为止,我做了一些类似下面的事情。

// Your naming is very confusing ... Min should be the smaller value
public float MaxAltNeedleRotation = 135f;
public float MinAltNeedleRotation = -65f;

private float alreadyRotated = 0;

public void update ()
{ 
    var direction = 0;

    // use && here .. you don't want to do a bitwise & on bools
    if (Input.GetAxisRaw("Vertical") > 0 && alreadyRotated < MaxAltNeedleRotation)
    {
        direction = 1;
    }
    // use else if since anyway only one of the cases can be true
    else if (Input.GetAxisRaw("Vertical") < 0 && alreadyRotated > MinAltNeedleRotation)
    {
        direction = -1;
    }

    // use the rotation and riection
    // but clamp it so it can minimum be MinAltNeedleRotation - alreadyRotated
    // and maximum MaxAltNeedleRotation - alreadyRotated
    var rotation = Mathf.Clamp(direction * 15f * Time.deltaTime, MinAltNeedleRotation - alreadyRotated, MaxAltNeedleRotation - alreadyRotated);

    if(rotation != 0)
    {
        AltNeedleBright.transform.Rotate(Vector3.forward * rotation);

        // update the alreadyRotated value
        alreadyRotated += rotation;
    }
}

很显然,此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); }) } } 无法正常工作...

顺便说一句。我在端点看到id的数据没有问题。只是卡住了axios部分。我怎样才能找到身份证?

axios.get("/api/articles/" + id)

1 个答案:

答案 0 :(得分:0)

好的,花了一些时间才弄清楚。虽然不确定这是最好的方法,但是现在可以正常工作。

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