vuex請求本地json數據還沒完成 頁面就加載渲染了

這個問題困擾了我好久 ，
最終還是解決了 ： 我最開始想岔了，我看見其他大佬們都說不要直接用this.$store.state.aaa=bbb;將aaa的值改變成bbb ， 不建議這樣賦值（原理是vuex源碼中的利用vue的watch功能監聽這個數據，但是，這個監聽有缺陷，就是如果state里面值是數組的話，對數組某個指針進行更改的時候是無法觸發這個監聽的）。 所以讓我只想着在mutation 里面改變state的值，而我要調用本地的json數據來賦值給state好讓全部的組件都能共享這些數據，然后才將這些數據加載到dom上然后渲染DOM
我只好在action中來加載本地json數據，然后通過mutation來改變state的值，問題就出在這里，（action中可以執行異步函數，mutation中只能是同步的）（請求json數據是異步操作）我不管將action的調用函數放在哪個鈎子下面，json數據的加載都比DOM渲染得慢得多 ，中途打印全是Promise（還沒搞完的意思） 。
最后我是將json數據請求放在外面的created鈎子中，然后再接下來 this.$store.commit("increment",data.data.data);傳給matation函數我請求到的json數據對象，在matation中將data.data.data賦值給state的 。完美解決了問題。（vuex數據刷新后效失，我博客有一篇有說明解決辦法喲~~

貼個代碼：

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;
    }