Question

我使用axios来获取我的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

有几种解决方法。

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

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

您可以像观看vuex变量一样（无需异步即可完成操作，但我想添加它们）

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

别忘了导入地图导图：https://vuex.vuejs.org/guide/getters.html

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

1 个答案: