VUEJS ROUTER 在将其推送到调度操作之前刷新页面

Question

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

这里是代码，在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)
      }
    }
  }

并且在用户中-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
  },

有没有办法在渲染之前刷新推送的路由？我缺少任何生命周期挂钩吗？

或者可能使用手表来发现 users 的状态变化（在商店中包含所有创建的用户）？

我目前正在检查此解决方案，因为它似乎最适合我，但如果我遗漏了有关生命周期挂钩的某些信息，则此选项可能会很好。

如果有人在我之前有答案，请分享:) 谢谢 x

更新

我回到这个问题，我认为最好的方法是@ambianBeing createUser().then(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，但它也不起作用。

有人知道怎么帮忙吗？谢谢

Answer 1

正如评论中已经提到的，您的 promise 似乎无法快速解决，因为它是异步调用。有多种方法可以解决此问题。这里有 2.

使用你的回报承诺

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

使用计算属性

您也可以使用 computed 属性。这样做，您的组件将在每次状态更改时重新呈现。所以以下可能会解决您的问题。

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

Answer 2

我没有将用户对象传递给操作……

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

但该操作希望收到一个：

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

N.B。正确的动作是路过的用户而不是用户。

这解决了问题，这就是解决问题的方法。我猜。如果有人有不同的想法，请。谢谢

VUEJS ROUTER 在将其推送到调度操作之前刷新页面

VUEJS ROUTER Refresh page before pushing it in dispatch action

lifecycle

page-refresh

vue-router

vuejs2