VueJS - мне нужна помощь в реализации компонентов рендеринга - PullRequest
Новая
       18

VueJS - мне нужна помощь в реализации компонентов рендеринга

2 голосов
/ 08 апреля 2020

Я создаю сайт, где пользователи могут загружать сообщения. У каждого пользователя есть страница профиля, где он может видеть, какие записи ему понравились и какие записи они создали. Над созданным постом есть кнопка удаления. Когда я удаляю сообщение, оно удаляется, но только с конца. На домашней странице и странице профиля (если я go снова на страницу профиля) пост все еще там. Если я обновлю sh страницу, все будет работать отлично, но должен быть способ сделать это без обновления, верно?

У меня возникли проблемы с повторным рендерингом компонентов. Я очень новичок в программировании, как вы можете видеть. С помощью этого метода удаления мне нужно обновить 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);
    });
}

мутации из "store" 

 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 = []),

},

1 Ответ

2 голосов
/ 08 апреля 2020

Не уверен, что этого будет достаточно для исправления, но попробуйте заменить все это: 

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;
  }
}
...