NuxtでVuexを使う5

今回は合計金額と税込金額を表示させるようにします。
特段素晴らしい変更箇所はないのでソースを一式載せます

test.vue

<template>
  <v-container>
    <v-layout justify-center row>
      <v-flex xs11 md10>
        <div id="main-area">
          <h1>超リッチな買い物リスト</h1>
          <v-layout justify-space-around>
            <v-flex xs5 md4>
              <v-text-field label="商品名" v-model="name" required ></v-text-field>
            </v-flex>
            <v-flex xs5 md4>
              <v-text-field label="値段" v-model="price" required ></v-text-field>
            </v-flex>
            <v-flex xs1 md1>
              <v-text-field label="個数" v-model="quantity" required ></v-text-field>
            </v-flex>
          </v-layout>
          <v-layout>
            <v-flex xs2>
              <v-btn block color="secondary" @click='add' dark>ADD</v-btn>
            </v-flex>
            <v-flex xs1 md1 offset-xs1 offset-md1>
              <v-text-field label="税率(%)" v-model="tax" required ></v-text-field>
            </v-flex>
          </v-layout>
          <div id="list-area">
            <ul>
              <li v-for="list in lists" v-bind:key="list.id">{{list.name}}{{list.price}}円{{list.quantity}}個 </li>
            </ul>
          </div>税込合計{{ sum + ( Math.floor(sum * (this.tax / 100)) )}}円 税抜合計{{ sum }}円 
        </div>
      </v-flex>
    </v-layout>
  </v-container>
</template>
<script>
export default {
  layout: 'mylayout',
  data(){
	  return {
		  name:'',
		  price:'',
		  quantity:1,
		  tax:8
	  }
  },
  //状態を変更する
  methods:{
	  add:function(){
		  if(this.name != '' && this.price != ''){
			this.$store.dispatch(`list/addList`,{_name:this.name,_price:this.price,_quantity:this.quantity})
			this.name = ''
			this.price = ''
			this.quantity = 1
		  }

	  }
  },
  //状態を取得する
  computed: {
	  lists(){
		  return this.$store.getters['list/allLists']
	  },
	  sum(){
		  return this.$store.getters['list/getSum']
		  //return num.reduce((x,y) => x + (y.price * y.quantity))
	  }
  }
}
</script>

list.js

export const state = () => ({
  lists: [{
    name: "牛乳",
    price: 100,
    quantity: 1
  }, {
    name: "りんご",
    price: 200,
    quantity: 2
  }, ]
})
//追加
export const getters = {
  allLists(state) {
    return state.lists
  },
  getSum(state) {
    return state.lists.reduce((x, y) => x + (y.price * y.quantity), 0)
  }
}
export const actions = {
  addList({
    commit
  }, list) {
    commit('ADD_LIST', list)
  }
}
export const mutations = {
  ADD_LIST(state, obj) {
    state.lists.push({
      name: obj._name,
      price: obj._price,
      quantity: obj._quantity
    })
  }
}

こんな感じになりました。
少し解説します。

reduce

合計金額を出したいのですが金額*個数の合計が必要になります。
reduceメソッドはまさにピッタリで、配列の中身をじゃんじゃん回しながら、合計値を保持できるんです。
詳しくは
Array.prototype.reduce()

return state.lists.reduce((x, y) => x + (y.price * y.quantity), 0)

これはlistの中を走査するんですが、xを合計値として保持しています。
なんの値を合計していくかというと、yです。
このyは、配列の各要素になりますので、各要素の金額と個数をかけた値を、xに足していく感じです。
第二引数の0は合計値の初期値です。

税込金額

税込合計{{ sum + ( Math.floor(sum * (this.tax / 100)) )}}円 税抜合計{{ sum }}円

税込金額は普通の計算式出していますが、普通にやると小数点以下が大変なことになってしまうので、Math.floorメソッドで切り捨てています

コメント

タイトルとURLをコピーしました