Vuexを使用し、投票アプリを作成しています。
各人間にボタンが宛がわれていて、ボタンをクリックするとactionがdispatchされ、vote の数が1増えるようにしてあります。
##やりたいこと
ボタンを押してvoteが増えた後、全体の何%がその人に入れたかを計算したいです。
そしてその計算結果を、すべてのobjectのpercentageに反映させたいです。
手順としては、
- すべての投票数を取得
- 個人の投票率を出す (person.vote / すべての投票数 * 100)
- すべてのobjectのpercentageを、2で計算した数字に更新する
このロジックをstore.jsに書きたいのですが、
・どうやってすべてのobjectのvoteの数字の合計を出すか
・計算した数字を、どうやってすべてのobjectのpercentageに設定するか
・そもそもこのロジックが合っているのか
が分かりません。
現在はこの処理をstore.jsのmutationsに追加しようとしています。
どのようにすればボタンを押すと投票率が計算できるか、どなたかご教授いただけないでしょうか。
store.js export const store = new Vuex.Store({ state: { persons: [ { id: 0, name: '田中', vote: 0, percentage: 0 }, { id: 1, name: '佐藤', vote: 0, percentage: 0 }, { id: 2, name: '山口', vote: 0, percentage: 0 }, { id: 3, name: '佐々木', vote: 0, percentage: 0 }, { id: 4, name: '岡田', vote: 0, percentage: 0 } ] }, getters: { person: state => { return state.persons; }, }, mutations: { vote: (state, payload) => { const index = state.persons.findIndex(person => person.id === payload); state.persons[index].vote++; }, }, actions: { voteAction(store, payload) { store.commit('vote', payload) }, } })
Button.vue <template> <div v-for="(person, index) in persons" :key="index"> <button type="button" @click="vote(person.id)">{{ person.name }}</button> </div> </template> <script> import { mapGetters } from 'vuex'; import { mapMutations } from 'vuex'; export default { computed: { persons() { return this.$store.getters.persons } }, methods: { vote(id) { this.$store.dispatch('voteAction', id); }, } } </script>
あなたの回答
tips
プレビュー