I want to make a desktop app in vue-electron. I am new to both vue.js and electron.
I am having some problems while managing state.
When I click on login button https://cloudup.com/cFl9MTY6cnn I send data i.e sessionId and username to next screen https://cloudup.com/c76fmL8OGbF and on this screen I display these props https://cloudup.com/csahnc6Z04J using this code https://cloudup.com/cdR0F6Qyt-3 but as I go to the third screen https://cloudup.com/c0F1ztX8qu3 and then come back then this data disappears https://cloudup.com/cTFW32DxeRa
I am going back to second screen using router.go(-1) https://cloudup.com/cvpxk4GsIRx
The vue-router documentation https://router.vuejs.org/en/essentials/navigation.html says that
“router.push method pushes a new entry into the history stack, so when the user clicks the browser back button they will be taken to the previous URL.”
and router.go(n) "This method takes a single integer as parameter that indicates by how many steps to go forwards or go backwards in the history stack"
However in my case, lifecycle hooks are called again when I go back to history stack. So does that mean when we come to previous page that component is created again and not popped from stack. I actually don’t want to refresh / reload the page on back button.
You need to send the data to the third screen,too.
Instead of
<route-link to="third_screen"></router-link>
You need to write,
<router-link :to="{ path: 'third_screen', params: { session_id: this.session_id, userName:this.user_name}}">User</router-link>
And instead of router.go(-1) you need to send the data as params again to your second screen using router.push() method.
But I won't suggest the above method as you need to pass the same data as params to all routes.
You should also have a look at Vuex.
Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.
You should store your Session Id as cookie instead of passing it as props.
Update
Also have a look at <keep-alive></keep-alive>.
Reference
Related
I have a form with a dropdown list of country options like so:
When the user selects an option, the form will load some data from an API so the user can make changes. However, some parts of the form have some deeply nested components where the user can edit additional data on a separate page. The problem is that when the user changes navigation and then clicks the back button on the browser, the drop down list is 'reset' and he has to select again the country that he was editing.
Can someone suggest a way to handle this issue so that if user clicks the back button on his browser (or the page has a "back to results link"), he will go back to the form and it will already be pre-selected with his option?
Should I be handling this via $route.query, localstorage, vuex? I would prefer not to use Vuex but I guess I can if needed.
Is $router query all i need here? I can capture the country's id and run the API call again on navigation back to the drop down selection page?
Example data from API:
{
id: 1,
name: 'Afghanistan'
}
When user selects a country from menu, I run an API get request like so:
async setSelectedCountryObj(value) {
if (value) {
const response = await APIService.tempISOCountryById(value.code)
....snip...
it's possible to handle with router, but that not a good way, you should go with vuex, that best way, just create store, and dispatch after select value, and always get value when come on that component, that essay not that much difficult, let me know if you need but i know you can.
I am using $router.go(-1) to go back to the previous page but as I am using this on a home page I want know how to check if there is a previous route.
Vue router navigation is tracked by the native browser history, use window.history.length.
If it is 0 there is nothing to go back to.
However; Users arriving from another website have a value higher than 0.
To overcome this issue, upon your App mounting; store the initial value of window.history.length globally.
Capture the initial value using a mount hook such as: beforeMount or mounted.
Store the history length value using $root as a global state:
this.$root.historyCount = structuredclone(window.history.length)
Alternatively use VueX if you are already leveraging the store bus plugin.
structuredclone or lodash.clone ensures you have a copy of the value rather than a reference to it, a reference would be bad; as this means you would always have the latest history count rather then the original entry point value.
https://developer.mozilla.org/en-US/docs/Web/API/structuredClone
https://lodash.com/docs/4.17.15#clone
When checking history state on a call to action, subtract $root.historyCount from window.history.length to see if zeroes out.
This way you will be only counting the history that occurs in your own app.
You may also want to consider that perhaps if your current route ($router.currentRoute) is the home page there is also no way of going back beyond that page but obviously will prevent back navigation to prior home revisits.
As window.history.length will always return 1.
You can use
if (window.history.state.back === null) {
router.push({path="/"}); //or whichever path you required
} else {
router.back();
}
I'm new to Nuxt, but I have a bootstrap header with the standard v-if="authenticated" kinda state for login\logout buttons.
The auth provider is firebase which has a onAuthStateChanged method that I use to set (or reset) the user property in the state store.
So page loads, I see the login button, onAuthStateChanged runs, sets the user, then login disappears and logout button shows up (can see the Vuex events from base->set as well).
Question is, what am I doing fundamentally wrong such that I'm getting this flashing state. Is the only way to handle this to work with localStorage? ...should I NOT be storing the user in the state.store?
You need to save it in the store. But make no mistake because when reloading you have to set the token value using localstorage.
These are very good explanations
I am trying to get 3 different routing "styles" in my application. I need to identify these in each view-model's activate method:
User clicks a button or link in my app that causes my app to call this.router.navigate()
This one is easy because I always put a parameter into the URL, so in the target View-Model, I have that param in my activate method.
The users presses the back or forward buttons or loads the application for the first time.
I can also get this by using the this.router.isExplicitNavigation variable or checking if my state is uninitalized.
The user clicks on one of the views displayed in the nav-bar (setup in the app.ts configureRouter method).
Unfortunately I cannot find a way to distinguish this one from when the user presses the back and forward buttons on the browser.
So here is my question, is there a way to know when a view-model's activate method has been called because a user selected a nav-bar route?
If I understand your question correctly, you want distinguish between 1. and 3. In activate(), you receive all routing parameters (as the method's first argument), both:
from the route-template, such as /myRoute/:myparam
from the query string
So I'd suggest to put a query parameter for the menu bar, which parameter you can read in activate(). For example:
let's say your route /myRoute
from the button, simply navigate to /myRoute
from the navbar, navigate to /myRoute?from=navbar
You might know this, but you have multiple options to navigate from code:
router.navigate('compose your route manually')
router.navigateToRoute('route's name', parameters)
in template, using <a route-href="route: 'myRoute'; params.bind={...}" >
Your code:
//button
router.navigateToRoute('my-route');
//navbar
router.navigateToRoute('my-route', {from: 'navbar'});
//destination view-model
activate(params: Object): void {
if (params.from === 'navbar')
//routed from the navbar
else
//routed from a button
}
We have developed an MVC4 Web Application. Due to the flow of pages (it is a reservation system) we need when the user pressed back button the page to be executed again ie reload data from database as it was called from first time.
May be a solution is to suggest how to Capture the browser's back button in an MVC4 web application and execute a Controller's Action
Kindly consider.
Any assistance is kindly appreciated.
Based on your comments it seems you are building up state over several pages (in a wizard style) and it is when navigating back to an earlier page that you would like the state to be cleared.
You would need to capture the page navigation logic on the server side and not rely on capturing back button events on the client side.
You should use the state you've captured to determine what should be displayed to the user and what should happen to the current state you have.
For example, imagine you have pages A, B, C, D which collect user information. The user has entered information on pages A and B (which has been gathered in the session or the database perhaps) and is now on page C. They then navigate back to page A (via the back button or by modifying the url directly). At this point (in the controller for page A) you can determine from the current state that they have been to page B and therefore deduce that they must have navigated back. You can therefore clear the state at this point or perform whatever logic is required.