VUEJS ROUTER 在调度操作中推送之前刷新页面答案

【问题标题】：VUEJS ROUTER Refresh page before pushing it in dispatch actionVUEJS ROUTER 在调度操作中推送之前刷新页面
【发布时间】：2019-09-11 07:52:47
【问题描述】：

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

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

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

或者也许使用手表来发现 users 的更改状态（在商店中包含所有创建的用户）？

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

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

更新

我回到这个问题，我认为最好的方法是@ambianBeing createUser().then(res => /*do stuff*/) do stuff = ? 所以，在用户模块中，我创建了一个新的突变和一个新的动作（在 then() 内部调度的那个 - 在推送新路由之前）

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

)。

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

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, {…}, {…}, {…}, {…}, {…}]

我也在提交中尝试了用户而不是用户，但它也不起作用。

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

【问题讨论】：

createUser(userData) 是否解决了一个承诺？执行users-list.vue 的created() 钩子时可能没有完成。你也可以尝试使用beforeMount生命周期钩子。
是的，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); return request({ url: '/users/', method: 'post', data: bodyFormData }) } 根据我的阅读，不强烈推荐 beforeMount，但我会尝试。谢谢
我尝试了 beforeMount 并且在控制台中看起来更好：ALL USERS WITH GETTERS IN USERS_LIST: (23) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, SETUSERS RESPONSE: (24) [{…}, {…}, 最后一个是 api 调用的响应（与最后一个用户正确），第一个是获取用户状态商店，尚未更新。
@fdR 因为createUser 是一个axios 调用/承诺，为什么不更新存储并在解决createUser().then(res => /*do stuff*/) 之后推送路由。另请注意：如果 dom 直接依赖于数据（获取或存储）created hook 是要走的路。
@ambianBeing 是对的。但是，您也可以使用 computed 属性来监听更改。

标签： vuejs2 vue-router lifecycle page-refresh

【解决方案1】：

正如 cmets 中已经提到的，由于它是异步调用，您的 promise 似乎无法快速解决。有多种方法可以解决这个问题。这里有 2 个。

使用你的回报承诺

@ambianBeing 已经提到过。您可以在返回的承诺中设置任何最终导致所需结果的内容。

使用计算属性

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

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

【讨论】：

我使用了计算属性，我从数据中删除了 users[] 并按照你的建议放置在计算中，它可以工作，谢谢！还要感谢@ambianBeing x
我实际上在控制台中收到了这个警告：vue.runtime.esm.js:619 [Vue warn]: Computed property "users" was assigned to but it has no setter.，即使表格立即显示了刚刚创建的用户。我更新了代码：users() { get: () => this.$state.store.getters.users set: (users) => this.$state.commit('SET_USERS', users ) return this.$store.getters.users }
- 在商店里：setUsers({ commit, state }) { return new Promise((resolve, reject) => { getProfiles(state.users).then(response => { console.log('SETUSERS RESPONSE: ', response.results) commit('SET_USERS', response.results) resolve() }).catch(error => { console.log('error setting users: ', error) reject(error) }) }) }, 应该是对的，但警告仍然存在。 @ambianBeing 也可以查看之前的评论
既然您使用的是 VueX，请保持简单。避免通过计算属性改变存储。相反，在函数（方法）或生命周期钩子中进行任何突变。在您的情况下，这应该会导致更好的可读性和可维护性代码。
我明白了，那么如何摆脱这个警告呢？

【解决方案2】：

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

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

但该操作预计会收到一个：

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

注意正确的操作是一个通过的用户而不是用户。

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

【讨论】：