Маршрутизатор VUEJS обновляет страницу перед нажатием ее в действии отправки

Маршрутизатор VUEJS обновляет страницу перед нажатием ее в действии отправки

11.09.2019 10:52:47 Просмотров 60 Источник

У меня есть страница создать пользователя. Когда я нажимаю кнопку Создать пользователя, он отлично работает, он создает нового пользователя и перенаправляет меня на страницу, отображающую всех пользователей. Но я заметил, что для того, чтобы увидеть последнего пользователя (только что созданного) здесь (на странице, отображающей всех пользователей), мне нужно обновить страницу.

Вот код, в createUser.вю:

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)
      }
    }
  }

И в списке пользователей.вю:

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(который в магазине содержит все созданные пользователи)?

В настоящее время я проверяю это решение, поскольку оно кажется мне наиболее подходящим, но если мне не хватает чего-то о крючках жизненного цикла, этот вариант может быть хорошим.

Если у кого-то есть ответ передо мной, пожалуйста, поделитесь :) Спасибо икс

ОБНОВЛЕНИЕ

Я возвращаюсь к этой проблеме, я думаю, что лучший способ-это тот, который указан @ambianBeing createUser().then(res => /*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)
},

Но я получаю только что созданный пользователь undefined, вот консоль.бревно:

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

Я также попробовал пользователя вместо пользователей в фиксации, но это тоже не работает.

Кто-нибудь знает, как помочь? Спасибо

У вопроса есть решение - Посмотреть?

Ответы - Маршрутизатор VUEJS обновляет страницу перед нажатием ее в действии отправки / VUEJS ROUTER Refresh page before pushing it in dispatch action

Aer0

11.09.2019 11:36:42

Как уже упоминалось в комментариях, похоже, что ваше обещание не будет достаточно быстро разрешаться, поскольку это асинхронный вызов. Есть несколько способов решить эту проблему. Вот 2.

Используйте свое обещание возвращения

@ambianBeing уже упоминал об этом. Вы можете установить что-нибудь в пределах возвращающегося обещания, которое в конечном итоге приведет к желаемому результату.

Использование вычисляемого свойства

Вы также можете использовать computedсвойство. При этом ваш компонент будет повторно отображаться каждый раз при изменении состояния. Таким образом, следующее может решить вашу проблему.

computed: {
  users() {
    return this.$store.getters.users;
  }
}
https://stackoverflow.com/questions/57884524/vuejs-router-refresh-page-before-pushing-it-in-dispatch-action/57885254#comment102193095_57885254
Спасибо, я стараюсь!
https://stackoverflow.com/questions/57884524/vuejs-router-refresh-page-before-pushing-it-in-dispatch-action/57885254#comment102193239_57885254
Я использовал вычисленное свойство, я удалил пользователей[] из данных и разместил внутри вычисленного, как вы предложили, и это работает, спасибо! И благодаря @ambianBeing тоже x
https://stackoverflow.com/questions/57884524/vuejs-router-refresh-page-before-pushing-it-in-dispatch-action/57885254#comment102194573_57885254
Я на самом деле получаю это предупреждение в консоли: 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 }
https://stackoverflow.com/questions/57884524/vuejs-router-refresh-page-before-pushing-it-in-dispatch-action/57885254#comment102194583_57885254
- В магазине: 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 смотрите предыдущий комментарий тоже
https://stackoverflow.com/questions/57884524/vuejs-router-refresh-page-before-pushing-it-in-dispatch-action/57885254#comment102194780_57885254
Поскольку вы используете VueX, держите вещи простыми. Избегайте изменения хранилища с помощью вычисляемого свойства. Вместо этого выполните любые мутации в функциях (методах)или крючках жизненного цикла. В вашем случае это должно привести к гораздо более удобочитаемому и поддерживаемому коду.
https://stackoverflow.com/questions/57884524/vuejs-router-refresh-page-before-pushing-it-in-dispatch-action/57885254#comment102194854_57885254
Я понимаю, так как же избавиться от этого предупреждения?
Является ответом!
fdR

19.09.2019 01:05:32

Я не передавал объект пользователя в действие …

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

но действие ожидает получить один:

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

N. B. правильным действием был тот, кто передавал пользователя, а не пользователей.

Это решило проблему, и это был способ сделать это. Я думаю. Если кто-то думает иначе, пожалуйста. Спасибо

Закрыть X