Vue vuex mapState created execution order

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"]): []

after entering component A, call the API, request the data back, save it in localStorage, click the route to jump to component B, why is this.articles [] in created (), there is no data on the page? when I enter component B, I refresh the page again and then have the data. Is there a problem with the execution sequence of computed () and created () in it? How to solve this problem?

Vuex vue.js
Mar.23,2021

created the $store of vuex is already bound to the vue instance when the beforeCreate hook is triggered (exactly $store is bound to the vue instance when the beforeCreate hook is triggered).
https://github.com/vuejs/vuex.

I think there are two possible problems:

  1. after the asynchronous request data is returned, it is only saved to localStorage , not to vuex .
    because state of vuex is initialized only once
    only articles:localStorage ["articles"]? JSON.parse (localStorage ["articles"]): [] is not enough. Article in state should be reassigned after the request is returned.
    2. When
  2. jumps to B, the asynchronous request has not yet been returned, so the data in vuex is naturally not updated.

Previous: What is the difference between calling object Obj, directly in es6 and {.Obj}.

Next: Geth client and Mist wallet are under the Ropsten network, why is the balance of the same account different?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu