Vue.js 如何在vue中实现自更新排序

我有一个vuex商店

游戏

，其中包含一个数组

玩家

每个

玩家

都有一个

id

、

姓名

和一个

分数

我现在有了一个组件

记分板

，它应该按分数列出所有球员

为了对玩家进行排序，我在组件中添加了一个计算属性

当我现在更新应用程序中某个玩家的分数时，我的计算属性不会被触发。我知道它没有被触发，因为数组本身没有改变。我需要调用push/pop/shift/任何改变数组的东西

解决这个问题的常用方法是什么？当我更新数组的某些属性时，是否也应该对其进行变异？由于呈现

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>

---

没有看到你是如何使用记分板组件的，很难说为什么它没有更新

无论如何，如果您要删除记分板组件上的属性球员，并将Vuex state球员与mapState或mapGetters一起使用，它将在您更改球员数据时自动更新你的记分板

在创建下面的演示过程中，我发现的另一点是，您正在按分数排序，但我认为应该是分数。因为您的状态中没有score属性，或者代码段中没有分数计算

请看一下下面的演示或这个

我认为你的货物分类是可以的。我刚刚把结果颠倒过来，先得最高分

在你的

addPoints

变异方法中，我改为速记

+=

，因为我认为这更容易阅读-你的版本在这里也可以

mapState或mapstation的演示中的注释代码与映射程序的操作相同，并留在那里以了解映射程序的操作

const initialState={
id:“”，
玩家：[{
id:0，
姓名：'第一'，
积分：20
}, {
id:1，
姓名：'第二'，
分数：10分
}, {
id:2，
姓名：'第三名玩家'，
积分：35
}]
};
康斯特博弈={
名称空间：对，
州：初始州，
突变：{
添加点（状态、有效负载）{
constplayer=state.players.find（（p）=>p.id==parseInt（payload.id））；
//控制台日志（'addpoints'，有效载荷，播放器）；
player.points+=有效载荷.points；
}
}
};
常数记分板条目={
道具：[“玩家”]，
模板：`
名称：{{player.Name}}

得分：{{player.points}
调试：
{{player}}
`
};
常数记分板={
//道具：[玩家]，
模板：`
记分牌
`,
数据（）{
返回{}
},
组成部分：{
记分牌记录
},
计算：{
…Vuex.mapState({
players：（state）=>state.game.players//info:这里的映射更复杂，因为没有模块-->我们可以使用…mapState（['players]）；
}),
/*players（）{//与mapState相同
console.log（这个$store.state.game.players）；
返回此。$store.state.game.players；
},*/
分类层（）{
return u.sortBy（this.players，“points”）.reverse（）；/“score”）
}
}
};
Vue.use（Vuex）；
const store=新的Vuex.store({
模块：{
游戏
}
});
新Vue({
el:“#应用程序”，
商店，
数据（）{
返回{
测试数据：{
id:2，
分数：10分
}
};
},
组成部分：{
记分牌
},
方法：{
/*添加点（有效载荷）{
此.$store.commit（'game/addPoints'，有效载荷）；
}*/
…Vuex.Map({
添加点：“游戏/添加点”
})
}
});

用户id:
要点：
加分
谢谢！事实上，只是我的财产被命名错误。(－‸ლ)不客气。那么错误的名字在哪里？传递到
记分板的
玩家
道具不正确？是的。排序
得分时
是错误的，
分数应该在那里。
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
    }
 ...