I'm new with vue and firebase

Projekt is open so it doesnt have auth. My site should be simple, with several input fields in every page, button with upload files and at the end of every page "Next page" button.But for better understanding below is short example.

.

On the first page we have ,

• input field - where you need enter your name. E.g. John
• Button - where we go to the second page

after I click button, firebase automatically create new collection with unique ID

.

when we go on the second page, the plan is that we have:

• title - with my name from the first page (Welcome John)
• input field - where you need enter your city
• Button - where we go on page number 3

My questions are: how can my program know that name of user is John in page num 2? How to connect certian ID with current/correct user so I can later save city also in the same collection?

I was thinking to put timestamp and pull latest collection, but in that case I will have problem if there are multiple users using program in the same time.

I was wondering if any of you have better solution?

CodePudding user response：

Based on your requirements, I see that you want to persist the person's name to the next page. In order to do that, you will need a unique id that is persisted across pages. This unique id could then be the key of the Firestore document so that on the next page, you can easily identify in page 2 which document you created in page 1.

Here's an example pseudocode:

1. Create a unique id and store it inside sessionStroage
2. On first page, create the document containing the name with this uniqueId as the key.
3. On second page, retrieve this unique id from sessionStorage, and using this id you can now get the Firestore document with the specified unique id.

CodePudding user response：

My questions are: how can my program know that name of user is John in page num 2? How to connect certain ID with current/correct user so I can later save city also in the same collection?

Since you are using Vue.js I would use a state management library like Pinia (if you use Vue.js 3) or Vuex (if you use Vue.js 2).

You have to store the "name from the first page" and the ID of the Firestore Document which is created in this first page, in such a way that you can, in the second page, display the name and save the data entered in the second page to the same Firestore document.

---

Note that when you will close the app or the browser all this data will disappear. If you want to keep it across sessions the best would be to sign up the user in Firebase. You could also store this data in the browser's local storage but if the user uses another browser or computer this data will not be available.

CodePudding user response：

Thank you guys, I'll try tomorrow, enough coding for today :D