Manipulate Vuex and Quasar state upon initialization with data retrieved from Firebase version 9

Utilizing quasar alongside firebase 9, I am facing a challenge in setting the state with actions during the initialization of my project. My goal is to retrieve data from firebase just once and store it in an array within the Vuex state.

    import { getData } from "src/firebase/config";

// Fetch data from packages collection
export const loadPackages = async () => {
  const packages = await getData("packages");

    return packages;
}

// Retrieve data from menu collection
export const loadMenu = async () => {
  const packages = await getData("meals-menu");

    return packages;
}

I am currently using the return value of each function in their respective Vue components, but I am now looking for a way to utilize the returned data to mutate the Vuex state.

Any suggestions or tips would be greatly appreciated!

Thank you.

Answer №1

To address the issue, consider storing Firebase data in local storage first and then updating the Vuex state once the local storage is set.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Effectively detect the 'scrollend' event on mobile devices

When implementing the -webkit-overflow-scrolling: touch; style on a mobile element, dealing with scroll events can be quite challenging as they are triggered by various actions such as 'flicking', 'panning' and when the scroll comes to ...

Executing Ionic function before application shutdown

Does anyone know of a function that can be triggered when the app is about to exit, close, or go into the background? Essentially any event that indicates "the user has stopped using the app"? In my app, I create a 'user log' that keeps track of ...

React seems to be frequently throwing errors related to undefined variables

What I'm attempting to do is repeat a React element a certain number of times. I've used a for loop in the past with simple HTML elements and it worked fine. However, now I'm encountering an error stating that the 'fields' array is ...

Running two servers simultaneously in the same environment - ANGULAR 4 at port 4200 and Node Express at port 3000

Is there a way to simultaneously run an Angular server 4 and another Node Express server on the same port? I've attempted using both proxy and static methods without success. Any guidance would be greatly appreciated! ...

Is it possible to access a variable outside of the immediate lexical scope in sails.js when using nested population?

I came across this answer and used it to create a solution that suited my requirements. However, for the sake of experimenting, I decided to try a different approach without using async functions and ended up diving into callback hell. Here is the version ...

Having trouble getting Cordova to work properly with threejs?

I've developed a game using three.js in JavaScript, and I'm looking to publish it on the IOS and Android app stores with Cordova. However, I've encountered an issue where Cordova doesn't seem to support webGL. When I tried using a canva ...

The error thrown is: "Attempting to access the 'authService' property of an undefined object using TypeDi."

In the process of setting up an authentication system, I have created a class called AuthRouter: import { Router } from 'express' import Container, { Service } from 'typedi' import AuthenticationController from './index' @Ser ...

Making an HTTP request within a forEach function in Angular2

Encountering an issue while using the forEach function with HTTP requests. The _watchlistElements variable contains the following data: [{"xid":"DP_049908","name":"t10"},{"xid":"DP_928829","name":"t13"},{"xid":"DP_588690","name":"t14"},{"xid":"DP_891890" ...

Ensuring Consistent Height for Bootstrap Card Headers

I am currently working with bootstrap cards on two different web pages. The challenge I am facing is that on one page, the header text has a fixed height so I can easily match their card-header height using min-height. However, on the second page, the card ...

Is there a way to exchange the ID with a different value in an object?

Can anyone help me with swapping each id with the corresponding item? Here is a sample code snippet to illustrate: const swapId = (id, item) => { const map = [ { id: 1, item: 'fruit' }, { id: 2, item: ...

Jump to last scroll position when refreshing the page in Mobile Safari using JavaScript event

Is there a way to detect a JavaScript event triggered when the page is refreshed in Safari, causing it to return to the previous scroll position? This situation can be frustrating because the scroll event only responds to user-initiated scrolls and won&ap ...

Tips for activating the Enter key press event when the URL hash is modified

Check out the sandbox here. I've neatly organized my links inside <li> elements. Whenever a link is clicked, the URL of the page changes to the corresponding <div> id element on the page. Currently, I'm trying to figure out how to s ...

How can I iterate through div elements with a specific class and update child divs according to parent div attributes using JavaScript?

I have divs scattered across my pages with rounded edges and gradients that vary in intensity from the edges to the center. Originally, these divs had a fixed width and height with one large background image. I needed them to be flexible, so I divided the ...

Conceal all the division elements by referencing their id values

When I pass a value by ID in JavaScript to hide the li element, only the first li is hidden and the second one remains visible. How can I hide all relevant elements? $(function() { $("#0").hide(); }); <script src="https://ajax.googleapis.com/ajax/l ...

How can React.Js and Typescript be used to extract information from JSON files?

Hi there! I've been working with MongoDB, Mongoose, and React.Js for my project. One of the features I have is a page where users can view posts. When making a fetch request to the backend, I receive JSON data in response: { "post" ...

Having trouble removing a DOM element with jQuery?

Hey there, I need your help with a jQuery issue I'm facing. I am currently working on cloning a div element that contains a span with a click event attached to it. The purpose of the click event is to remove the newly cloned section from the DOM. Whil ...

Clicking on a page will cause a random div to appear and disappear using jquery

I have two div elements in my application. I want to randomly show and hide these divs when a navigation link is clicked and the next page loads completely. The example below does not include multiple pages, only a single page. Therefore, I want to random ...

Trouble with implementing useEffect to assign value to TextField

I'm currently working on a project where I am using the useEffect hook to retrieve initial data from a database and set it as the initial value of a Material-UI TextField upon loading the page. Although this approach works most of the time, there are ...

How can I maintain the hover color on a button with a text label even when hovering over the text label?

I need help creating a button with a text label that both respond to clicks and have a hover color. The current code I have works, but the hover color is lost when hovering over the text label. How can I modify the code to maintain the hover color even w ...

A guide on utilizing the sx prop in React to customize the color scheme of a navigation bar

I'm currently working on creating a sleek black navbar in react. Check out the code snippet I have so far: import UploadIcon from "@mui/icons-material/Upload"; import CustomButton from "./CustomButton"; import AppBar from '@mu ...