lundi 20 avril 2020

What is the best design pattern for using a retrievable Vuex property in a view?

Vue / Vuex Design related question.

I have object(s) in store, that are used throughout the view. These objects will be retrieved from server when the view is created. Here is a pseudo representation of this:

<template>
  
</template>

computed: {
   someAsset(){
     return this.$store.getters.someAsset;
   }
},
created() {
   this.$store.dispatch("retrieveSomeAsset", assetId);
}

Note that I have multiple "someAssets" each being retrieved from different endpoints and the property will sometimes reach multiple levels down the nested object.

Whats the best pattern to use in order to avoid "Cannot read property 'xyz' of undefined" when accessing the object properties in the view while the object has not yet been fully retrieved?

Thus far I have used multiple approached but am not really happy with none of them:

  1. Global / Full screen loader until all assets have been retrieved. Not so great for UX as I want the user to be able to immediately access one asset even if the other is still in process. i.e no global loader, individual loaders are fine.
  2. Individual loaders for each object used in the view clutters up the code as the assets are being used through the code and need to check for the loader each time is no bueno.
  3. Having a dummy object model in store as a default value to avoid "undefined" related errors. Avoid critical errors such as the above but introduces excess model definition requirements in the store.

There are more ways than one to approach this issue and each has its own trade-offs. Based on Your experience, what is the cleanest way to approach this problem and what kind of design pattern would you be using here that is abstract enough to work on multiple asset types and situations?

Cheers & Thanks

Aucun commentaire:

Enregistrer un commentaire