Nuxtjs / Vuejs / Laravel 5.7 API: компонент, реагирующий после действия / мутации - PullRequest
Новая
       92

Nuxtjs / Vuejs / Laravel 5.7 API: компонент, реагирующий после действия / мутации

0 голосов
/ 05 марта 2019

Может быть, вы можете мне помочь.Я искал и пробовал много вещей.

У меня есть проект Nuxtjs с Laravel 5.7 API (JWT Auth для аутентификации).Пользователь может CRUD сообщение.Все работает или почти.Когда текущий пользователь создает сообщение, после него он перенаправляется на страницу, где его сообщения индексируются.Но иногда появляется новое созданное сообщение, а иногда нет, у меня нет ошибок в журналах консоли, и на стороне сервера созданное сообщение присутствует в базе данных.Когда я обновляю страницу, новый пост отображается.Это очень случайно.То же самое для действия удаления.

Я использую NuxtJs с Vuex для магазина.Я вызываю действие в моем методе компонента с диспетчеризацией.Вызов действия axios put или delete метод, и я фиксирую мутацию для обновления массива state.posts.после отправки я перезагружаю пользователя с модулем аутентификации NuxtJS, чтобы перезагрузить сообщения пользователя.и нажмите маршрут.

Чуть ниже реализации действия удаления, чтобы показать вам мою логику.

Метод моего компонента: 

deletePost(post) {
  this.$toast.show('Do you really want to remove this post ?', {
    duration: 5000,
    icon: 'check',
    action: [
      {
        text: 'No',
        onClick: (e, toastObject) => {
          toastObject.goAway(0)
        }
      },
      {
        text: 'Yes',
        onClick: (e, toastObject) => {
          this.$store.dispatch('posts/deletePost', post).then(() => {
            console.log('here')
            this.$auth.fetchUser()
            this.$router.push({ path: '/:account/posts' })
          })
          this.$toast.show('Post successfully removed', {
            icon: 'check'
          })
          toastObject.goAway(0)
        }
      }
    ]
  })
},

Действие сохранения: 

deletePost({ commit }, post) {
    this.$axios
      .delete(`/posts/${post.id}`)
      .then(res => {
        console.log(res.data)
        if (res.data.message === 'success') commit('DELETE_POST', post)
      })
      .catch(err => {
        console.log(err)
      })
  }

Мутация магазина: 

DELETE_POST(state, post) {
    const index = state.posts.findIndex(item => item.id === post.id)
    state.posts.splice(index, 1)
  }

1 Ответ

0 голосов
/ 13 марта 2019

Когда вы добавляете или удаляете свойства реактивного объекта, вы должны убедиться, что представление обновляется соответствующим образом.Поэтому я думаю, что вы должны использовать свойства Vue.delete и Vue.set.Пожалуйста, укажите https://vuejs.org/v2/api/#Vue-delete и https://vuejs.org/v2/api/#Vue-set

Когда вы удаляете сообщение из списка сообщений, ваш список сообщений должен обновляться соответственно

Редактировать DELETE_POST мутация выглядит следующим образом: 

DELETE_POST(state, post) {
    const index = state.posts.findIndex(item => item.id === post.id)

    if (index > -1) {
        Vue.delete(state.posts, index);
    }
  }

Также, когда вы обновляете свойство сообщения, выполняйте мутацию следующим образом: 

UPDATE_POST(state, updatedPost) {

    let index = state.posts.findIndex(post => post.id === updatedPost.id);

    if (index > -1) {
           Vue.set(state.posts, index, updatedPost)
    }
 },
...