Refresh page before pushing it in dispatch action

Hi, I have a create user page. When I hit create user button it works fine, it creates the new user and redirect e to the page displaying all the users. But I noticed that, in order to see the last user (the one just created) here (in the page displaying all the users) I need to refresh the page. Is there a way to refresh the pushed route before it gets rendered?

Here the code, in createUser.vue:

methods: {
    onSubmit() {
      const userData = {
        username: this.form.username,
        email: this.form.email,
        password: this.form.password
      }
      try {
        this.userData = createUser(userData)
        this.$message('User created!')
        this.$router.push({
          path: '/users-list'
        })
      } catch (err) {
        console.log('Error in creating user: ', err)
      }
    }
  }

And in the users-list.vue:

created() {
    this.$store.dispatch('user/setUsers')
    const users = this.$store.getters.users
    this.users = users
    console.log("ALL USERS WITH GET PROFILE IN LISTA: ", users)
    console.log('store in lista utenti: ', this.$store.state)
    this.totalRows = this.users.length
  },

Or maybe use a watch to spot change state of users (which in the store contains all the users created)?

I am currently checking for this solution as it seems to be the most appropriate to me, but if I am missing something about lifecycle hooks this option can be good to.

If anyone has an answer before me, please share :slight_smile:
Thanks
x

I tried the beforeMount and looked better in the console:
ALL USERS WITH GETTERS IN USERS_LIST: (23) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, SETUSERS RESPONSE: (24) [{…}, {…},
The last one is the response of the api call (correct with the last user in it), the first is taking the users state from the store, not yet updated.

I used computed property:

computed: {
  users() {
    return this.$store.getters.users;
  }
}

I was using users [] in data() so I removed it form there and placed in computed.
Have a look at this post for more explanation:

As you can read in the stack overflow post, computed properties wasn’t the best way to deal with this issue.

So, I am back to this issue, I think the best way is to take advantage of the promise and return what I need before pushing to the route.
createUser().then(res => /*do stuff*/) do stuff = ?

This is ‘my stuff’:
in the user module I created a new mutation and a new action (the one to be dispatched inside then() -before pushing the new route

.then(() => {
....
this.$store.dispatch('user/addUser')
this.$router.push({...})
})

).

The mutation, to kind of push the just created user to the users array, is:

ADD_USER: (state, user) => {
 state.users = [user, ...state.users]
},

And the action that commits this mutation is:

addUser({ commit }, users){
 commit('ADD_USER', users)
},

But the I get the just created user undefined, here the console.log:

ALL USERS WITH GET PROFILE IN USERS LIST:  (18) [undefined, {…}, {…}, {…}, {…}, {…}]

I also tried user instead of users in the commit, but it doesn’t work neither.

Anyone knows how to help?

you don’t pass a user object to the action …

this.$store.dispatch('user/addUser')

but your action expects to receive one:

addUser({ commit }, users){
 commit('ADD_USER', users)
},

So you should probably provie one:

this.$store.dispatch('user/addUser', user)

…wherever you would get that from …

1 Like

Thanks Linus, correct, I got what you mean. The issue is solved. Now I get the user but its properties do not display in the table. But this is another story, I think the store is not perfect…
Thanks a lot anyway.
xx