vue에서 자체 업데이트 정렬을 수행하는 방법

vue에서 자체 업데이트 정렬을 수행하는 방법

저는 vuex 가게를 가지고 있습니다.game배열을 포함하는players.

각각player을 가지고 있습니다.id,name그리고 ascore.

이제 구성 요소가 있습니다.scoreboard점수에 따라 모든 선수를 나열해야 합니다.

플레이어를 정렬하기 위해 구성 요소에 계산된 속성을 추가했습니다.

이제 앱의 어딘가에서 플레이어 점수를 업데이트해도 계산된 속성이 트리거되지 않습니다.어레이 자체가 변경되지 않았기 때문에 트리거되지 않은 것으로 알고 있습니다.저는 push/pop/shift/array를 변형시키는 모든 것을 호출해야 합니다.

이 문제를 해결하기 위한 일반적인 접근 방식은 무엇입니까?일부 속성을 업데이트할 때 배열도 변경해야 합니까?렌더링하는 구성 요소로서player.points이미 성공적으로 업데이트되었습니다. 더럽게 보입니다.

계산된 속성에 청취자를 더 추가할 수 있는 방법이 있습니까?

내 구성 요소:

<template>
  <div class="scoreboard">
    <strong>Scoreboard</strong>
    <div class="scores">
      <score-board-entry v-for="player in sortedPlayers" :key="player.id" :player="player"></score-board-entry>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
import ScoreBoardEntry from './ScoreBoardEntry.vue'

export default {
  props: ['players'],
  data () {
    return { }
  },
  components: { ScoreBoardEntry },
  computed: {
    sortedPlayers () {
      return _.sortBy(this.players, 'score')
    }
  }
}
</script>

<style scoped>
</style>

내 스토어:

const initialState: state = {
  id: '',
  players: []
}

const game = {
  namespaced: true,
  state: initialState,
  mutations: {

    addPoints (state: state, payload: addPointsPayload) {
      const player = state.players.find((p) => p.id === payload.id)    
      player.points = player.points + payload.points
    }
 ...

스코어보드 구성 요소를 사용하는 방법을 확인하지 않고는 업데이트되지 않는 이유를 말하기가 어렵습니다.

어쨌든 scoreBoard 구성 요소에서 속성 플레이어를 제거하고 mapState 또는 mapGetters와 함께 Vuex 상태 플레이어를 사용하면 플레이어 데이터를 변경하는 즉시 보드가 자동으로 업데이트됩니다.

아래 데모를 만드는 동안 발견한 또 다른 포인트는 점수별로 정렬하는 것이지만 점수가 되어야 한다고 생각합니다.상태에 점수 속성이 없거나 점수 계산이 스니펫에 없기 때문입니다.

아래 데모를 보거나 이 바이올린을 보십시오.

그리고 당신의 loadash 정렬은 괜찮다고 생각합니다.저는 방금 결과를 뒤집어서 가장 높은 점수를 먼저 받았습니다.

당신의addPoints돌연변이 방법 나는 속기로 바꿨습니다.+=저는 그것이 읽기 더 쉽다고 생각하기 때문입니다. 당신의 버전도 여기서는 괜찮았습니다.

mapState 또는 mapMutations에서 데모에 주석이 달린 코드는 mapper와 동일하게 수행되며 mapper가 수행하는 작업을 이해하기 위해 그대로 남아 있습니다.

const initialState = {
  id: '',
  players: [{
    id: 0,
    name: 'first',
    points: 20
  }, {
    id: 1,
    name: 'second',
    points: 10
  }, {
    id: 2,
    name: 'third player',
    points: 35
  }]
};

const game = {
  namespaced: true,
  state: initialState,
  mutations: {
    addPoints(state, payload) {
      const player = state.players.find((p) => p.id === parseInt(payload.id));
      //console.log('addpoints', payload, player);
      player.points += payload.points;
    }
  }
};

const ScoreBoardEntry = {
  props: ['player'],
  template: `
  	<div>
    	Name: {{player.name}}<br/>
      Score: {{player.points}}
      <pre>Debug:
{{player}}
      </pre>
    </div>
  `
};

const scoreBoard = {
  //props: ['players'],
  template: `
  	<div class="scoreboard">
    <strong>Scoreboard</strong>
    <div class="scores">
      <score-board-entry v-for="player in sortedPlayers" :key="player.id" :player="player"></score-board-entry>
    </div>
  </div>
  `,
  data() {
    return {}
  },
  components: {
    ScoreBoardEntry
  },
  computed: {
    ...Vuex.mapState({
    	players: (state) => state.game.players // info: mapping more complicated here because of module --> with-out module we could just use ...mapState(['players]);
    }),
    /*players() { // same as mapState
    	console.log(this.$store.state.game.players);
    	return this.$store.state.game.players;
    },*/
    sortedPlayers() {
      return _.sortBy(this.players, 'points').reverse(); //'score')
    }
  }
};

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    game
  }
});

new Vue({
  el: '#app',
  store,
  data() {
  	return {
    	testData: {
      	id: 2,
        points: 10
      }
    };
  },
  components: {
    scoreBoard
  },
  methods: {
  	/*addPoints(payload) {
    	this.$store.commit('game/addPoints', payload);
    }*/
  	...Vuex.mapMutations({
    	addPoints: 'game/addPoints'
    })
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.3.1/vuex.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<div id="app">
  user id: <input v-model="testData.id">
  points: <input v-model="testData.points" type="number">
  <button @click="addPoints(testData)">
  
  Add points
  </button>
  <score-board></score-board>
</div>

언급URL : https://stackoverflow.com/questions/44865059/how-to-achieve-a-selfupdating-sort-in-vue