Vuex 스토어의 각 항목에 대해 점수를 할당(계산 기반)한 다음 점수별로 모두 정렬하십시오.

Vuex 스토어의 각 항목에 대해 점수를 할당(계산 기반)한 다음 점수별로 모두 정렬하십시오.

나는 Vuex(vue.js) 애플리케이션에 다음 요구 사항을 가장 잘 구현하는 방법을 이해하려고 한다.

최대한 단순하게 유지하도록 노력하겠다, 내가 이루고자 하는 것은 해커 뉴스 사이트와 비슷한 것이다.따라서 응용 프로그램은 계산/알고리즘에 기초하여 각 항목(포스트)에 대한 점수를 계산해야 할 것이다.점수는 like의 조합과 그것이 만들어진 날짜에 의해 결정된다.따라서 점수는 지속적으로 업데이트되므로(지정된 기간이 만료될 때까지) 점수는 데이터 소스에 저장되지 않고 앱에 의해 계산된다.

제 주요 질문은 Vuex 애플리케이션에서 이를 구현하는 것이 가장 적합한가 입니다.

나는 Vuex의 게시물 가게를 차렸고(각 기사를 '포스트'라고 불렀다) 모든 게시물을 리스트에 표시할 수 있다.이제 두 가지 주요 목표가 있는데,

• 게시물에 점수 할당(아티클)
• 게시물 결과 목록을 점수를 기준으로 필터링하십시오.

내가 조사를 좀 해봤는데, 공감대는 '점수'를 '포스트' 스토어('포스트' 배열에는 추가되지 않음)와 분리하는 것이 가장 좋을 것 같은 느낌이 든다.

다음 코드는 잘 작동하지만 장황하게 느껴진다.이러한 기능 중 하나를 'getter/mutions/actions'로 옮기는 것이 좋을까?

참고: 이 예제의 경우 계산/알고리즘을 총계(like)에 총계(total comments)를 더한 값으로 단순화했는데, 분명히 최종 알고리즘은 해커 뉴스처럼 작동하기에 더 복잡하다.

<div>
  <button @click="postFilterKey = 'all'"><button>
  <button @click="postFilterKey = 'orderByScore'"><button>
</div>

<div v-for="post in filterPosts" v-bind:key="post.value">
  <p>Title: {{ post.title }}</p> 
  <p>Total Likes: {{ post.likes }}</p>
  <p>Total Comments: {{ post.comments }}</p>
  <p>Score: {{ post.comments | getScore(post.likes) }}</p>
</div>

computed: {
   ...mapState(["posts"]),
   filterPosts () {
     return this[this.postFilterKey]
   },
   all () {
     return this.posts;
   },
   orderByScore (){
     return this.posts.sort((b,a) =>
        this.calculateScore(a.totalComments, a.totalLike) - 
        this.calculateScore(b.totalComments, b.totalLike));
   },

methods: {
    calculateScore(totalComments, totalLikes) {
     let score = totalComments + totalLikes
     return score;
   },
}

filters: {
    getScore(totalComments, totalLikes) {
     let score = totalComments + totalLikes
     return score;
   },
}

봐줘서 고마워

네가 말한 것처럼, 네가 가진 것은 잘 될 것이고, 그것에는 아무런 문제가 없다.

현재 코드와 관련하여 개선될 수 있는 몇 가지 문제가 있음:

1. 이 구성 요소의 직접 하위 항목이 아닌 다른 앱의 점수를 재사용하려면getScore()유지하기가 더 어려운 구성 요소에서 기능한다.
2. 페이지가 렌더링될 때마다getScore()함수는 목록의 모든 게시물에 대해 한 번 다시 실행되며, 사용자가 목록을 정렬할 때마다calculateScore()그리고getScore()목록의 각 항목에 대해 기능이 한 번 다시 실행되므로 효율성이 높지 않다.

당신이 암시했듯이 한 가지 해결책은 이러한 기능들을 게터로서 상점에 두는 것이다.이렇게 하면 위에 열거한 두 가지 문제를 모두 다음과 같이 해결할 수 있을 것이다.

1. 이러한 기능을 한 곳에 보관하여 코드를 건조하게 유지하십시오.
2. 이러한 기능을 vuex getter로 실행하면 결과가 캐시되므로 변경에 종속된 상태만 다시 실행될 수 있다.

상점에 있는 getter 속성의 예는 다음과 같다.

getters: {
  postsWithScore: state => {
    return state.posts.map(post => {
      return {
        ...post,
        score: post.comments + post.likes,
    });
  }
}

자세한 내용은 vuex 문서를 참조하십시오. https://vuex.vuejs.org/guide/getters.html

나는 점수 계산을 게이터로 옮기는 것을 고려하겠다.비즈니스 모델의 한 조각처럼 느껴지는데, 왜 그것을 그냥 사용하는 부품으로 고쳐야 하는가?내가 기억하기론, Vuex의 게터에는 캐싱이 내장되어 있어서 성능 향상도 있어.

PS. 정시 동적 득점 베이스는 단점이 있다.사용자가 항목을 보는 동안 항목을 옮기고 싶지 않을 수도 있지만 페이지 지정은 어떻게 하시겠습니까?사용자가 다음 페이지로 이동하고 그 사이에 점수가 변경되면 목록의 연속성이 깨진다.어쨌든, 그건 그냥 UX의 걱정거리일 뿐이야.

참조URL: https://stackoverflow.com/questions/57256196/for-each-item-in-a-vuex-store-assign-a-score-based-on-a-calculation-then-sor