VueJS-컴포넌트 재렌더 구현에 도움이 필요함

VueJS-컴포넌트 재렌더 구현에 도움이 필요함

유저가 투고를 올릴 수 있는 사이트를 구축하고 있습니다.모든 사용자에게는 프로파일페이지가 있습니다.이 페이지에서는, 마음에 드는 투고와 작성한 투고를 확인할 수 있습니다.작성된 게시물 위에 삭제 버튼이 있습니다.투고를 삭제하면 백엔드에서만 삭제됩니다.홈페이지와 프로필 페이지(프로파일 페이지로 다시 이동해도)에 게시물이 그대로 있습니다.페이지를 리프레시하면 모든 것이 정상적으로 동작하고 있습니다만, 리프레시하지 않고 실행할 수 있는 방법이 있을 것 같습니까?

컴포넌트 재렌더에 문제가 있습니다.보시다시피 저는 프로그래밍에 매우 익숙하지 않습니다.이 삭제 방법에서는 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>

라이프 사이클 훅을 다음에 나타냅니다.다음 항목에 있습니다.

    handleDeleteUserPost(post) {
  this.loadPost(post, false);
  const deletePost = window.confirm("Do you want to delete your post?");
  if (deletePost) {
    this.$store.dispatch("deleteUserPost", {
      postId: this.postId,
    });
  }
}

vuex 저장소 구성 요소의 삭제 기능'액션' 중:

 deleteUserPost: ({ state, commit }, payload) => {
  apolloClient
    .mutate({
      mutation: DELETE_USER_POST,
      variables: payload,
    })
    .then(({ data }) => {
      const index = state.userPosts.findIndex(
        (post) => post._id === data.deleteUserPost._id
      );
      const userPosts = [
        ...state.userPosts.slice(0, index),
        ...state.userPosts.slice(index + 1),
      ];
      commit("setUserPosts", userPosts);
    })
    .catch((err) => {
      console.error(err);
    });
}

「스토어」로부터의 돌연변이

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

와 함께

commit("removeUserPost", index)

그리고 그 돌연변이를 만들어냅니다.

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

이 방법으로 충분하지 않은 경우,userPosts다음과 같은 컴포넌트에 있습니다.

computed: {
  userPosts() {
    return this.$store.state.userPosts;
  }
}

언급URL : https://stackoverflow.com/questions/61098074/vuejs-i-need-help-implementing-re-rendering-components