vuex request local json data is not yet complete rendering of the page to load

This problem has troubled me for a long time,
finally solved: I started to think fork, I saw other bigwigs say do not directly use this $ store.state.aaa = bbb; will change the value of aaa to bbb, no. What suggestions assignment. So let me just want to change the value inside the mutation state, and I want to call the local json data assigned to the state so that all components can share data, then it will load the data into the DOM dom and then render
me had to be loaded in the action json local data, and then change the value of state by mutation, the problem lies here, (action function can be executed asynchronously, the mutation can be synchronized) (request data json asynchronous operation) I regardless of the action of calling a function in which a hook below the load json data rendered much slower than DOM, halfway print all Promise (not finished out of the meaning).
Finally, I json data request is created on the outside of the hook, and then the next this.$store.commit("increment",data.data.data);pass matation function I json data object to request, will be assigned to the state in data.data.data matation. Perfect to solve the problem. (Vuex data refresh aftereffect loss, I have a blog a note solution yo ~ ~

Paste code:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    panghu: ""
  },
  mutations: {
    increment(state, apidata) {
      state.panghu = apidata;
    },
  },
 created() {
    if (
      JSON.parse(
        !localStorage.getItem("panghu") ||
          localStorage.getItem("panghu") == "undefined"
      )
    ) {
      axios.get("/api/panghu").then(data => {
        this.$store.commit("increment",data.data.data);
        this.home_one = this.$store.state.panghu.home_one;
        this.home_two = this.$store.state.panghu.home_two;
        this.home_three = this.$store.state.panghu.home_three;
        let panghu = this.$store.state.panghu;
        localStorage.setItem("panghu", JSON.stringify(panghu));
      });
    } else {
      let panghus = JSON.parse(localStorage.getItem("panghu"));
      this.$store.commit("increment",panghus);
      this.home_one = panghus.home_one;
      this.home_two = panghus.home_two;
      this.home_three = panghus.home_three;
    }

Guess you like

Origin www.cnblogs.com/panghu123/p/11746517.html