Vuex is recommended.
I’m using firebase for data storage, after users logged in, I commit their infos to vuex, and other pages or components will soon synchronize with those data automatically.
Storing data in LocalStorage may be a solution. LocalStorage is a Html5 feature.
And if you want to manlipulate data conveniently in a lodash shorthand syntax, you can try this js lib: Lowdb
By the way, the login sample of firebase stores data in localstorage.
thanks for that information, but what i actually need to know is how can I handle it the right way because I am having the trouble that as soon as someone is logged in, older pages dont show as if the user is logged in,
one solution would be to reload the pages which is imo not a very slik solution but sofar is what i am doing.
because as soon as the user changes his profile picture, or what every, it is still cached so i have to reload. which is really imo not very convinient.
I am looking for a solution that would display data correctly without manually having to update it or reload pages
Sorry, I only know vue can update dom automatically.
And without vue, by using the pure framework7, you still need to manually update page by invoking ‘setState’ which is described in the lastest 3.1.0 updates.
The thing is my app is already so further in development that I dont wanan migrate it to vue yet maybe in the future release
Anyways thank you alot for that little hint.
Yet i have another question
my user date is stored in the root context should i change that to each component context? or how can i use setState with Root Context updates?
I recommend you to store user data into localstorage after login. Without reactive property, you should update each page or component manually, extract data from localstorage within page:init event.
Maybe a better solution is using custom event, I just come up with this idea when I’m typing this reply.
You can register a event for each dom who shows user info. In jq,
on: {
pageInit() {
const self = this;
// bind event to current page which should has class="user-sync"
$('#page-xxx.user-sync').bind('onAuthStateChanged', function(user) { // didn't check whether if dom7 has bind method, so I use jq instead
self.$setState({
user: user
});
});
// extract data from localstorage
self.$setState({
user: JSON.parse(window.localStorage['user'])
});
}
}
and in the login component, append these code after user login: