Javascript VueJS-I需要帮助实现重新渲染组件

我正在建立一个网站，用户可以上传帖子。每个用户都有一个个人资料页面，在那里他们可以看到自己喜欢的帖子和自己创建的帖子。在创建的帖子上有一个删除按钮。当我删除帖子时，它会被删除，但只能从后端删除。在主页和个人资料页面（如果我再次进入个人资料页面），帖子仍然存在。如果我刷新页面，一切都会正常工作，但一定有办法在不刷新的情况下实现这一点，对吗

我在重新渲染组件时遇到问题。正如你所看到的，我对编程非常陌生。使用此删除方法，我需要更新3个组件（Home.vue、Posts.vue和Profile.vue）

我的个人资料组件/页面的删除按钮html：

<v-container class="mt-3" v-else>
  <v-flex xs12>
    <h2 class="font-weight-light">
      Created posts
      <span class="font-weight-regular">({{ userPosts.length }})</span>
    </h2>
  </v-flex>
  <v-layout row wrap>
    <v-flex xs12 sm6 v-for="post in userPosts" :key="post._id">
      <v-card class="mt-3 ml-1 mr-2" hover>
        <v-btn color="info" floating fab small dark @click="loadPost(post)">
          <v-icon>edit</v-icon>
        </v-btn>
        <v-btn
          color="error"
          floating
          fab
          small
          dark
          @click="handleDeleteUserPost(post)"
        >
          <v-icon>delete</v-icon>
        </v-btn>

        <v-img
          height="30vh"
          :src="post.imageUrl"
          @click="goToPost(post._id)"
        ></v-img>
        <v-card-text>{{ post.title }}</v-card-text>
      </v-card>
    </v-flex>
  </v-layout>
</v-container>

vuex存储组件的删除功能。在“行动”下：

来自“存储”的突变

---

}，

不确定这是否足以修复，但请尝试替换所有这些：

const userPosts = [
  ...state.userPosts.slice(0, index),
  ...state.userPosts.slice(index + 1),
];
commit("setUserPosts", userPosts);

与

commit（“removeUserPost”，索引）

并产生突变：

removeUserPost(state, index) {
  state.userPosts.splice(index, 1);  // <-- `splice` not `slice` here
}

---

您需要使用Vuex（商店）来完成此操作。我是。该应用程序使用vuex、graphql和apollo。我很抱歉。我已经编辑了我的突变，我将尝试你的方法。非常感谢您的回答。不用担心，不客气。请确保首先刷新页面/此答案，它可能自您上次看到后已被编辑。当我删除帖子时，我在控制台中出现此错误“[违规]”单击“处理程序耗时1601ms”。帖子会被删除，但就像以前一样，如果我转到显示它的页面或返回到概要文件的组件，它仍然在那里。如果单击已删除的帖子，我会收到以下错误：vue apollo.esm.js？522d:637查询“getPost”的GraphQL执行错误{name:“GraphQleror”，消息：“对于不可为null的字段查询，无法返回null.getPost.”。有什么想法或情况不正常吗？可能是由于

窗口。确认
。不清楚
loadPost
在删除处理程序中做了什么，我们看不到它做了什么。我们也看不到您如何在组件中使用
userPosts
。如果尚未使用计算机，请尝试我提到的计算机。很难说FUBAR是否成功，但该应用程序似乎比它需要的更复杂。您可以尝试将整个内容发布到并链接到此处。谢谢您的帮助。如果有什么我可以帮你理解的应用程序，只要问！
 mutations: {
setPosts: (state, payload) => {
  state.posts = payload;
},
setSearchResults: (state, payload) => {
  if (payload !== null) {
    state.searchResults = payload;
  }
},
setUser: (state, payload) => {
  state.user = payload;
},
setUserPosts: (state, payload) => {
  state.userPosts = payload;
},
setLoading: (state, payload) => {
  state.loading = payload;
},
setError: (state, payload) => {
  state.error = payload;
},
setAuthError: (state, payload) => {
  state.authError = payload;
},
clearUser: (state) => (state.user = null),
clearError: (state) => (state.error = null),
clearSearchResults: (state) => (state.searchResults = []),

const userPosts = [
  ...state.userPosts.slice(0, index),
  ...state.userPosts.slice(index + 1),
];
commit("setUserPosts", userPosts);

removeUserPost(state, index) {
  state.userPosts.splice(index, 1);  // <-- `splice` not `slice` here
}