vue vuex mapState created执行顺序

Question

A组件：
  存储：localStorage.setItem('articles', JSON.stringify(articles))
B组件:
computed: {
      ...mapState([
          "articles"
      ])
  },
  created(){
        var currentId = parseInt(this.$route.query.id);
        this.currentArticle = this.articles.filter((item)=>{
        return item.id === currentId   
        });
        this.isCollected = this.currentArticle[0].isCollected;
        this.collectNum = this.currentArticle[0].collectNum;
        console.log(this.currentArticle)
  },
vuex:
state.js:  articles:localStorage["articles"]?JSON.parse(localStorage["articles"]): []

进入A组件后，调用接口，请求回数据后，存到localStorage中，点击路由跳转到B组件，为什么在created()中 this.articles 为 []，页面上没有数据，当我进入B组件后再次刷新页面就有数据了，这里面的computed()和 created()是不是有执行顺序的问题？应该怎么解决这个问题呢？

Answer 1

created钩子触发的时候，vuex的$store是已经绑定到了vue实例上了的（准确的说是在$store是在beforeCreate钩子触发的时候被绑定到vue实例上）。
https://github.com/vuejs/vuex...

我觉得问题的可能有两种：

1. 异步请求数据返回后，只存到了localStorage，并没有存到vuex中。
   因为vuex的state只会初始化一次
   仅仅articles:localStorage["articles"]?JSON.parse(localStorage["articles"]): []是不够的，请求返回之后还应该把state中的article重新赋值。
2. 跳转到B的时候 异步请求还没有返回，vuex中的数据自然也就没有更新了。