Vuejs2 VUEJS路由器刷新页面，然后将其推入分派操作

我有一个创建用户页面。当我点击创建用户按钮时，它工作正常，它创建新用户并将我重定向到显示所有用户的页面。但是我注意到，为了在这里（显示所有用户的页面中）看到最后一个用户（刚刚创建的用户），我需要刷新页面

下面是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)
      }
    }
  }

在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
  },

有没有办法在渲染前刷新推送的路由？ 有我遗漏的生命周期挂钩吗

或者可以使用手表来发现

用户的状态变化（商店中包含所有创建的用户）

我目前正在检查这个解决方案，因为它似乎是最适合我的，但是如果我缺少关于生命周期挂钩的一些东西，那么这个选项对我来说是很好的

如果有人在我面前有答案，请分享：）
谢谢
x

更新

回到这个问题上，我认为最好的方法是@ambianBeing
createUser（）。然后（res=>/*do stuff*/）
do stuff=？
因此，在用户模块中，我创建了一个新的变异和一个新的操作（在推送新路由之前，将在then（）内部调度）

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

)

将刚创建的用户推送到用户数组的变种是：

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

导致这种突变的行为是：

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

但是我得到的是未定义的刚创建的用户，这里是console.log：

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

我还尝试了在提交中使用user而不是users，但它也不起作用

有人知道怎么帮忙吗？
谢谢
正如评论中已经提到的，由于这是一个异步调用，您的承诺似乎不能很快解决。有多种方法可以解决这个问题。这里有两个

兑现你的承诺

@安比安已经提到了这一点。您可以在返回的承诺中设置任何最终导致期望结果的内容

使用计算属性

您还可以使用
computed
属性。这样，组件将在每次状态更改时重新渲染。因此，以下内容可能会解决您的问题

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

正如在评论中已经提到的，由于这是一个异步调用，您的承诺似乎无法足够快地解决。有多种方法可以解决这个问题。这里有两个

兑现你的承诺

@安比安已经提到了这一点。您可以在返回的承诺中设置任何最终导致期望结果的内容

使用计算属性

您还可以使用
computed
属性。这样，组件将在每次状态更改时重新渲染。因此，以下内容可能会解决您的问题

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

我没有向操作传递用户对象

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

但该行动预计将收到一份：

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

注意：正确的操作是传递用户而不是用户

这解决了问题，这就是解决问题的方法。我想是吧。如果有人有不同的想法，请。
谢谢
我没有将用户对象传递给操作

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

但该行动预计将收到一份：

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

注意：正确的操作是传递用户而不是用户

这解决了问题，这就是解决问题的方法。我想是吧。如果有人有不同的想法，请。
谢谢
是
createUser（userData）
解决了一个承诺吗？执行
users list.vue
的
created（）
钩子时，可能无法完成此操作。您还可以尝试在挂载之前使用
生命周期挂钩。是的，axios总是返回承诺。这里是api调用的代码：
export函数createUser（userData）{const bodyFormData=new FormData（）；bodyFormData.set（'username'，userData.username）；bodyFormData.set（'email'，userData.email）；bodyFormData.set（'password'，userData.password）；返回请求（{url:'/users/'，method'post'，data:bodyFormData}）
从我所读到的内容来看，beforeMount不是很推荐，但我会尝试一下。ThanksI尝试了beforeMount并在控制台中看起来更好：
所有用户在用户列表中都有getter:（23）[{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，SETUSERS响应：（24）[…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，
最后一个是api调用的响应（最后一个用户正确），第一个是从存储中获取用户状态，尚未更新。@fdR因为
createUser
是axios调用/承诺为什么不更新存储并在解析
createUser（）后推送路由。然后（res=>/*do stuff*/）
。另请注意：如果dom直接依赖于创建的数据（获取或存储），那么钩子是正确的方法。@ambianBeing是正确的。但是，您也可以使用
计算的
属性来侦听更改。
createUser（userData）
是否正在解析承诺？当
创建（）
hook of
users list.vue
已执行。您也可以尝试在安装前使用
beforeMount
lifecycle hook。是的，axios总是返回承诺。下面是api调用的代码：
export function createUser（userData）{const bodyFormData=new FormData（）；bodyFormData.set（'username'，userData.username）；bodyFormData.set（'email'，userData.email）；bodyFormData.set（'password'，userData.password）；返回请求（{url:'/users/'，方法：'post'，数据：bodyFormData}）}
据我所知，beforeMount不是很推荐，但我会尝试一下。ThanksI尝试了beforeMount，在控制台中看起来更好：
所有在用户列表中有getter的用户：（23）[{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，SETUSERS响应：（24）[{…}，{…}，
最后一个是响应