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

我使用axios获取JSON文件en vuex，以便在多个组件上使用获取的数据。 问题是我的页面在加载所有数据之前呈现。 由于我将渲染延迟了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)
       }
    }
});

组件.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文件中的所有数据之后，才会呈现页面。

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

• 您可以在组件中使用wait/async

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

• 您可以查看vuex变量，如（可以不使用async，但我喜欢添加它们）

---

别忘了导入MapGetter:

如果有人知道原因，我的帖子中的代码格式设置不起作用…？要获取，您需要为列表嵌套的每个级别将代码缩进额外的4个空格（或一个选项卡）。否则，解析器会假定您只是试图在段落中断后继续列表项。请原谅我的无知，我在internet上看到了一些示例，但它们都与我的设置不同。例如，你能告诉我第一个选项在我的情况下会是什么样子吗？@MK01111000我更新了我的代码示例，希望这能澄清一点。老实说，我仍然不知道如何在我的代码中使用它。我还得做些调查。谢谢你的帮助

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