Question

也许您可以帮助我。我搜索并尝试了很多东西。

我有一个带有Laravel 5.7 API（身份验证的JWT Auth）的Nuxtjs项目。用户可以对帖子进行CRUD。一切正常或几乎正常。当前用户创建帖子时，将其重定向到为其帖子建立索引的页面上之后。但是有时会出现创建的新帖子，有时却不会出现，我在控制台日志中没有错误，并且服务器端创建的帖子存在于数据库中。当我刷新页面时，将显示新帖子。这是非常随机的。删除操作也是一样。

我将NuxtJs与Vuex一起使用进行存储。我通过调度在组件方法中调用动作。该操作调用axios的put或delete方法，我提交了一个突变以更新state.posts数组。分派后，我使用NuxtJS的auth模块重新获取用户以重新加载用户的帖子。并推动路线。

下面仅执行delete操作向您展示我的逻辑。

我的组件方法：

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

Answer 1

在添加或删除反应对象的属性时，必须确保视图相应更新。因此，我认为您必须使用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)
    }
 },

Nuxtjs / Vuejs / Laravel 5.7 API：动作/突变后组件可响应

1 个答案: