CODEWITHSUNDEEP
javascriptvue.js
priortt
priortt

Reputation: 129

Vue updates data without waiting for state file to update it

When the page is being loaded for the first time, vue component is not waiting for my custom store file to process it. I thought it might fix it with promises but I am not sure on how to do so on functions that do not really require extra processing time.

I am not including the entire .vue file because I know it surely works just fine. My store includes couple of functions and it is worth mentioning it is not set up using vuex but works very similarly. Since I also tested what causes the issue, I am only adding the function that is related and used in MainComp.

Vue component

import store from "./store";

export default {
  name: "MainComp",
  data() {
    return {
      isLoading: true,
      storageSetup: store.storage.setupStorage,
      cards: Array,
    };
  },
  created() {
    this.storageSetup().then(() => {
      this.cards= store.state.cards;
    });
    this.displayData();
  },
  methods: {
    displayData() {
      this.isLoading = false;
    },
  }

My custom store.js file

const STORAGE = chrome.storage.sync;

const state = {
  cards: []
};

const storage = {
  async setupStorage() {
    await STORAGE.get(['cards'], function (data) {
      if (Object.keys(data).length === 0) {
        storage.addToStorage('ALL');
      // else case is the one does not work as required
      } else {
        data.cards.forEach((elem) => {
          // modifies the element locally and then appends it to state.cards
          actions.addCard(elem);
        });
      }
    });
  }
};

export default {
  state,
  storage
};

Lastly, please ignore the case in setupStorage() when the length of data is equal to 0. If there is nothing in Chrome's local space, then a cards is added properly(state.cards is an empty array every time the page loads). The problem of displaying the data only occurs when there are existing elements in the browser's storage.

How can I prevent vue from assuming cards is not an empty array but instead wait until the the data gets fetched and loaded to state.cards (i.e cards in MainComp)?

Sorry if the problem can be easily solved but I just lost hope of doing it myself. If any more information needs to be provided, please let me know.

Upvotes: 1

Views: 165

Answers (1)

Phil
Phil

Reputation: 164980

Your main issue is that chrome.storage.sync.get is an asynchronous method but it does not return a promise which makes waiting on it difficult.

Try something like the following

const storage = {
  setupStorage() {
    return new Promise(resolve => { // return a promise
      STORAGE.get(["cards"], data => {
        if (Object.keys(data).length === 0) {
          this.addToStorage("All")
        } else {
          data.cards.forEach(elem => {
            actions.addCard(elem)
          })
        }
        resolve() // resolve the promise so consumers know it's done
      })
    })
  }
}

and in your component...

export default {
  name: "MainComp",
  data: () => ({
    isLoading: true,
    cards: [], // initialise as an array, not the Array constructor
  }),
  async created() {
    await store.storage.setupStorage() // wait for the "get" to complete
    this.cards = store.state.cards
    this.isLoading = false
  },
  // ...
}

Upvotes: 1

Related Questions