Маршрутизатор VUEJS обновляет страницу перед нажатием ее в действии отправки
У меня есть страница создать пользователя. Когда я нажимаю кнопку Создать пользователя, он отлично работает, он создает нового пользователя и перенаправляет меня на страницу, отображающую всех пользователей. Но я заметил, что для того, чтобы увидеть последнего пользователя (только что созданного) здесь (на странице, отображающей всех пользователей), мне нужно обновить страницу.
Вот код, в 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

11.09.2019 11:36:42
Как уже упоминалось в комментариях, похоже, что ваше обещание не будет достаточно быстро разрешаться, поскольку это асинхронный вызов. Есть несколько способов решить эту проблему. Вот 2.
Используйте свое обещание возвращения
@ambianBeing уже упоминал об этом. Вы можете установить что-нибудь в пределах возвращающегося обещания, которое в конечном итоге приведет к желаемому результату.
Использование вычисляемого свойства
Вы также можете использовать computed
свойство. При этом ваш компонент будет повторно отображаться каждый раз при изменении состояния. Таким образом, следующее может решить вашу проблему.
computed: {
users() {
return this.$store.getters.users;
}
}



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 смотрите предыдущий комментарий тоже



19.09.2019 01:05:32
Я не передавал объект пользователя в действие …
this.$store.dispatch('user/addUser')
но действие ожидает получить один:
addUser({ commit }, user){
commit('ADD_USER', user)
}
N. B. правильным действием был тот, кто передавал пользователя, а не пользователей.
Это решило проблему, и это был способ сделать это. Я думаю. Если кто-то думает иначе, пожалуйста. Спасибо