"쓰기 작업 실패: 계산된 속성 "포스트"가 읽기 전용입니다."

"쓰기 작업 실패: 계산된 속성 "포스트"가 읽기 전용입니다."

PostList에서 게시물을 제거하려고 하지만 오류가 발생합니다.

<PostList
    :posts="sortedAndSearchedPosts"
    @remove="removePost"
    v-if="!isPostsLoading"
  />

사후 기능 제거

 removePost(post) {
      this.posts = this.posts.filter((p) => p.id !== post.id);
    },

여기서 초기화된 게시물

 computed: {
    ...mapState({
      posts: (state) => state.post.posts,
    }),
    ...mapGetters({
      sortedPosts: "post/sortedPosts",
      sortedAndSearchedPosts: "post/sortedAndSearchedPosts",
    }),
  },

어디에 있는지 확실하지 않음this.posts실제로는 초기에 설정됩니다.아키텍처가 올바른 것으로 판단되면 다음과 같은 두 가지 옵션이 제공됩니다.

• 당신의 가게에 있는 게시물을 직접 제거하거나.sortedAndSearchedPosts변화를 직접 반영합니다.
• 글로벌 상태를 업데이트하지 않으려면 초기화할 때 로컬 복사본을 작성합니다.posts:

data () {
   return {
      posts: [...this.sortedAndSearchedPosts],
      ...
   }
},

로컬 게시물 목록을 사용하도록 코드를 업데이트합니다.

<PostList
    :posts="posts"
    ...
  />

이것이 도움이 되길 바랍니다!

언급URL : https://stackoverflow.com/questions/72379077/write-operation-failed-computed-property-posts-is-readonly