Маршрутизатор 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. правильным действием был тот, кто передавал пользователя, а не пользователей.
Это решило проблему, и это был способ сделать это. Я думаю. Если кто-то думает иначе, пожалуйста. Спасибо