Как проверить, загружены ли данные JSON

Question

Я использую 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)
       }
    }
});

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

не можете забыть импортировать mapGetters: https://vuex.vuejs.org/guide/getters.html