如何检查是否加载了 JSON 数据

Question

我使用 axios 在 vuex 中获取我的 JSON 文件，以便在多个组件上使用获取的数据。 问题是我的页面在所有数据加载之前呈现。 以下是有效的，因为我将渲染延迟了 2 秒，如果没有这个超时，它会导致错误。 我想以正确的方式做到这一点，但不知道该怎么做。

STORE.JS

Vue.use(Vuex);    
const store = new Vuex.Store({
    state: {
        poss: null
    },
    getters: {
        NAME: state => {
            return state.name
        },
        POSS: state => {
            return state.poss
        }
    },
    mutations: {
        SET_POSS : (state,payload) => {
          state.poss = payload
        },
        ADD_POSS : (state,payload) => {
          state.poss.push(payload)
        },
      },
      actions:{
       GET_POSS : async (context,payload) => {
          let { data } = await axios.get("json/poss.json")
          context.commit('SET_POSS',data)
       },
       SAVE_POSS : async (context,payload) => {
          let { data } = await axios.post("json/poss.json")
          context.commit('ADD_POSS',payload)
       }
    }
});

COMPONENT.VUE

module.exports = {          
        mounted:function(){
            var self = this;
            setTimeout(function () {
                self.mkPageload()
            }, 2000);
       },
       methods: {
            mkPageload: function(){ 
                let positions = this.$store.getters.POSS.pos            
                Object.keys(positions).forEach(key => { 
                   // rendering
                }
            }
       }
}

期望的结果是页面仅在 JSON 文件中的所有数据都加载完毕后才呈现。

Answer 1

有几种方法可以解决这个问题。

• 您可以在组件中使用等待/异步。

  async mounted () {
     await userStore.getAll()
     // access getter and render
  },
  

• 您可以观看 vuex 变量之类的（可以在没有异步的情况下完成，但我喜欢添加它们）

  async mounted () {
     await userStore.getAll()
  },
  computed: {
  ...mapGetters('users')
  }, 
  watch: {
      users(newValue, oldValue) {
         ....
         // render
      }
  }
  

不要忘记导入 mapGetters：https://vuex.vuejs.org/guide/getters.html