I have a beforeEach route guard that calls fetchWorkspaces action. This action performs a request to Axios and its response populates the state.
However, when the state is called from the created hook in the component and I refresh the page I do not get the values in the console, but the observer instead.
created() {
console.log(this.workspace) # returns {__ob__: Observer}
}
The action is returning a promise but the created hook is not waiting for that promise to resolve.
This is the hook from the router:
router.beforeEach((to, from, next) => {
store.dispatch('fetchWorkspaces').then(() => {
next()
})
}
And this is the action and its mutation:
export default {
state: {
workspaces: []
},
mutations: {
SET_WORKSPACES(state, workspaces) {
state.workspaces = workspaces.workspaces
}
},
actions: {
fetchWorkspaces({ commit }) {
return Vue.axios.get('/workspaces').then(response => {
commit('SET_WORKSPACES', response.data)
})
}
}
The created is called after the beforeEach hook. I do not understand why this behavior is happening and how to fix it.
The reason I want to get access the newly state data from created is to call other actions that will fetch resources based on this state data.
See this and that. I think the Vue is created first before your router register beforeEach. So, you should use beforeEach before you initiate Vue instance.
Related
I am trying to switch over to vuejs3 and the new vue-router.
Now I see that beforeRouteEnter is not exposed:
// same as beforeRouteUpdate option with no access to `this`
onBeforeRouteUpdate((to, from, next) => {
// your logic
console.log("Hello world") //this is only triggered if the id changes
next()
})
So my question is: How can I trigger the initial axios-requests on a specific route like /dashboard as I did before?
It's not possible to execute code in setup before the route enters because at the time of setup the navigation has already been confirmed.
Another option #1
You can still use the options api, so you could still use beforeRouteEnter:
setup() {
...
},
beforeRouteEnter(to, from, next) {
console.log(to);
}
Another option #2
Use beforeEnter in the router:
{
path: '/foo',
component: Foo,
beforeEnter(to) {
console.log(to)
}
}
When I dispatch an action in App.vue component in mounted() lifecycle hook, it runs after other components load. I am using async/await in my action and mounted lifecycle hook.
App.vue file
methods: {
...mapActions({
setUsers: "setUsers",
}),
},
async mounted() {
try {
await this.setUsers();
} catch (error) {
if (error) {
console.log(error);
}
}
},
action.js file:
async setUsers(context) {
try {
const response = await axios.get('/get-users');
console.log('setting users');
if (response.data.success) {
context.commit('setUsers', {
data: response.data.data,
});
}
} catch (error) {
if (error) {
throw error;
}
}
},
In Users list component, I need to get users from vuex. So I am using mapGetters to get Users list.
...mapGetters({
getUsers: "getUsers",
}),
mounted() {
console.log(this.getUsers);
},
But the problem is "setting users" console log in running after console logging the this.getUsers.
In Users list component, I can use getUsers in the template but when I try to console log this.getUsers it gives nothing.
How can I run app.vue file before running any other components?
You are using async await correctly in your components. It's important to understand that async await does not hold off the execution of your component, and your component will still render and go through the different lifecycle hooks such as mounted.
What async await does is hold off the execution of the current context, if you're using it inside a function, the code after the await will happen after the promise resolves, and in your case you're using it in the created lifecycle hook, which means that the code inside the mounted lifecycle hook which is a function, will get resolved after the await.
So what you want to do, is to make sure you render a component only when data is received.
Here's how to do it:
If the component is a child component of the parent, you can use v-if, then when the data comes set data to true, like this:
data() {
return {
hasData: false,
}
}
async mounted() {
const users = await fetchUsers()
this.hasData = true;
}
<SomeComponent v-if="hasData" />
If the component is not a child of the parent, you can use a watcher to let you know when the component has rendered. When using watch you can to be careful because it will happen every time a change happens.
A simple rule of thumb is to use watch with variables that don't change often, if the data you're getting is mostly read only you can use the data, if not you can add a property to Vuex such as loadingUsers.
Here's an example of how to do this:
data: {
return {
hasData: false,
}
},
computed: {
isLoading() {
return this.$store.state.app.users;
}
},
watch: {
isLoading(isLoading) {
if (!isLoading) {
this.hasData = true;
}
}
}
<SomeComponent v-if="hasData" />
if you're fetching a data from an API, then it is better to dispatch the action inside of created where the DOM is not yet rendered but you can still use "this" instead of mounted. Here is an example if you're working with Vuex modules:
created() {
this.fetchUsers();
},
methods: {
async fetchUsers() {
await this.$store.dispatch('user/setUsers');
},
},
computed: {
usersGetters() {
// getters here
},
},
Question: Do you expect to run await this.setUsers(); every time when the app is loaded (no matter which page/component is being shown)?
If so, then your App.vue is fine. And in your 'Users list component' it's also fine to use mapGetters to get the values (note it should be in computed). The problem is that you should 'wait' for the setUsers action to complete first, so that your getUsers in the component can have value.
A easy way to fix this is using Conditional Rendering and only renders component when getUsers is defined. Possibly you can add a v-if to your parent component of 'Users list component' and only loads it when v-if="getUsers" is true. Then your mounted logic would also work fine (as the data is already there).
I'm using storyblok-nuxt module. I plugged it in nuxt.cofig.js and it works fine in page when I call it directly in the asyncData method as such:
asyncData({ app }) {
return app.$storyapi.get("cdn/stories/articles", {
version: "draft"
})
In order to call it from vuex I'm importing it:
import storyapi from 'storyapi'
But Nuxt gives me an error:
Cannot find module 'storyapi'
Can I use this module in vuex, and if yes - what's solution?
Using storyapi with Nuxt is very easy. In your asyncData you can dispatch your action like:
asyncData ({ store }) {
store.dispatch('loadSettings', {version: "draft"})
}
And in your store actions, you can go for this.$storyapi directly. There is no need to import anything. Nuxt take cares of everything for you:
export const actions = {
loadSettings({commit}, context) {
return this.$storyapi.get("cdn/stories/articles", {
version: context.version
}).then((res) => {
// execute your action and set data
commit('setSettings', res.data)
})
}
}
For more info:
How to use the nuxt context in an vuex store?
I want to display a loading effect in a vue template whilst an asynchronous action in vuex is still running. But the loading effect doesn't seem to work. How do I fix it?. Is there any better way I can achieve this?
This is how I defined the action:
actions: {
signIn({ state }, user) {
auth()
.signInWithEmailAndPassword(userInfo.email, userInfo.password)
.then(result => {
return result
})
},
},
This how defined the dispatch in vue template method:
let loader = this.$loader.show()
this.$store.dispatch('signIn', this.user).then(() => {
loader.hide()
})
I expected the loader to start when the action begins and end when the action ends but it starts and ends almost instantly.
Just add return statement, that returns a Promise so you can then it in your component.
actions: {
signIn({ state }, user) {
return auth()
.signInWithEmailAndPassword(userInfo.email, userInfo.password)
.then(result => {
return result
})
},
},
So I have a loader screen in my app, and the idea is to show the loader screen on the beforeCreate hook so the user can't see the stuff being rendered, and then on the mounted hook remove the loader screen.
This is fun and nice for when you have two or three view/components, but currently my app has a lot more than that, and adding it to each component/view doesn't make much sense for me.
So I was wondering, is there any way to add something to the beforeCreate and mounted hooks on a global scope. Something like this:
main.js
Vue.beforeCreate(() => {
//Show the loader screen
});
Vue.mounted(() => {
//Hide the loader screen
});
That way it would be applied to every component and view
You can use mixins for this purposes, and import in components.
//mixins.js
export default {
beforeCreate() {},
mounted() {}
}
And in component add mixins: [importedMixins]
You will have access to 'this'.
Actualy you can use and vuex to (mapGetters, mapActions etc.)
If you don't want include mixins in every component, try to use vue plugins system (https://v2.vuejs.org/v2/guide/plugins.html):
MyPlugin.install = function (Vue, options) {
// 1. add global method or property
Vue.myGlobalMethod = function () {
// something logic ...
}
// 2. add a global asset
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// something logic ...
}
...
})
// 3. inject some component options
Vue.mixin({
created: function () {
// something logic ...
}
...
})
// 4. add an instance method
Vue.prototype.$myMethod = function (methodOptions) {
// something logic ...
}
}
And use your plugin like this Vue.use(MyPlugin, { someOption: true })
There is something very silimar to your request in vue-router. I've never used afterEach but beforeEach works perfectly.
router.beforeEach((to, from, next) => {
/* must call `next` */
})
router.beforeResolve((to, from, next) => {
/* must call `next` */
})
router.afterEach((to, from) => {})
Here is a documentation
There is also a hook called 'beforeRouteEnter'.
Link to beforeRouteEnter docs