I use Nuxt, auth & VUEX state to control the login & logout process.
After I log in, the VUEX state is already updated. But the page still not show my name. Only after I refresh the page, the page content is updated. I don't know why that happens. Could you please provide some hint on that?
Before page refresh:
After page refresh:
Below is my code snippet:
You need 'computed' the value with a getter which view version are you using ?
An exemple in 'vue-property-decorator':
get updateResult() {
return this.result;
}
Related
I have a blog (website.com), with a page for posts (website.com/post?id=...).
What I want, is whenever I go to post page, to trigger JS's alert.
This is the code for post page:
export default {
name: 'PagePost',
data() {
alert(1)
...
The problem is that if I go post page its trigger an alert, but if I go to another post it doesn't alert again, (it does only when I refresh the page).
From what I cloud understand, Vue save the page in the DOM, so it doesn't run this again (only when refreshing the page).
How can I re-trigger alert when the user go back and forth between pages?
P.S. what I'm trying to accomplish is when a user go between pages, to reload the post and the comments (without needing to refresh the page), but I tried to make the problem easier with trigger.
P.S. #2 I prefer to run the alert in the mounted() function, because it's loading faster than data().
It looks like you're using vue router. Take a look at beforeEnter method. You need define it in post route and trigger alert there.
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();
}
Problem
I have an electron app with vue. As the user has no UI to navigate back I created a back button.
This works so far so good. But being logged in and on the index page the user shouldn't be able to navigate back any more. As he would navigate back to the login but would get redirected back to the index page. And this wouldn't make much sense. For that I want to disable the back button.
Tested
I have added a global variable to get the previous route in my components. But somehow this gets messed up when clicking twice or more often. It looks like that:
router.beforeEach((to, from, next) => {
Vue.prototype.$prevRoute = from;
return next();
});
I think it is because when navigating back the previous route changed to the route you were coming from. And not the history anymore.
There seems to be a github feature request to add the referrer but it was opened in 2016 and I am not sure if it will be again the same problem as above.
https://github.com/vuejs/vue-router/issues/883
In-component guards
I also tested beforeRouteLeave and beforeRouteUpdate but as the back-button is in my layout these methods are not called.
Application-design
I am having a login-page with authentication. After that the user-information is stored in the local-storage and I am using a middleware concept for redirecting (https://markus.oberlehner.net/blog/implementing-a-simple-middleware-with-vue-router/)
To go back I am using this method: this.$router.back()
Expectation
My expected result would be to be able to check in the back-button-component if the back-route will be the login or if there the going-back-stack has only one value left. In that case I would disable my back-button.
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'm in Registration.vue component. The component contains registration form with email, password, etc.. fields.
I would like to thanks user for successful registering (with instruction that he should go check email).
What is the best solution to do this?
I was thinking about:
redirecting to second component using this.$router.push or this.$router.replace but this will change URL and when somebody go this URL without registering he will see message that he should check email...
replacing current component with other when registering action successful but I dont know how to do this (without URL change, and with good code).
using <component v-bind:is="currentView"> but I am not sure if this is best solution. I need to make three files (for parent component with :is, for form and for thanks). Also i need to emit event from child that registration went well, but on the other hand i should fire vuex registration action and dont expect for response (see the next sequence)
The other thing is that we should not wait for the vuex action to be completed, but i need to know if registration went well - https://github.com/vuejs/vuex/issues/46#issuecomment-174539828
I am using vue.js 2, vue-router, vuex
Thanks
You could use something like Sweet Alert to display a success or error dialog. It supports Ajax requests so you can display a "your registration is processing, please check your email" message while it is being handled.
The first approach is suitable when user successfully registers and then redirected to login page.
Now issue how to check whether user has entered required field? So there comes form validations. You can use vee-validate plugin and it's perfect for all projects. I am using it and it has so many available validations.
With these UI validations, after they are passed successfully then only submit action will be fired or else user will be prompted for entering required field.
You can see basic example here - http://vee-validate.logaretm.com/index.html#basic-example
When action is performed,
///main.js
...
Vue.use(VeeValidate)
...
// register.vue
this.$validator.validateAll().then((result) => {
if (result) {
//done
this.$router.replace( '/login' );
}
else{
// throw error
}
Simple as that.
Try this approach if you want the UI validations on the form.