NuxtでVuexを使う6

もはやVuexは関係ない記事になってきましたが、このまま完成させます。
今回は見栄えを良くするのと、削除機能を実装します。

リストの箇所をv-listにして見栄えを整えて、削除ボタンも用意します

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">
            <v-list flat subheader three-line >
              <v-subheader>買い物リスト</v-subheader>
              <v-list-item-group v-model="hoge" active-class="" >
                <v-list-item v-for="list in lists" v-bind:key="list.id">
                  <template v-slot:default="{ active }">
                    <v-list-item-action>
                      <v-checkbox v-model="active"></v-checkbox>
                    </v-list-item-action>
                    <v-list-item-content>
                      <v-list-item-title>{{list.name}}</v-list-item-title>
                      <v-list-item-subtitle>
                        <span v-if="list.price!=''">{{list.price}}円</span>{{list.quantity}}個
                        <span class="float-right">
                          <v-btn class="ma-2" color="red" dark v-on:click="delete_list(list)">delete </v-btn>
                        </span>
                      </v-list-item-subtitle>
                    </v-list-item-content>
                  </template>
                </v-list-item>
              </v-list-item-group>
            </v-list>
          </div>
          <v-simple-table>
            <thead>
              <tr>
                <th class="text-left">税込金額</th>
                <th class="text-left">税抜金額</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>{{ sum + ( Math.floor(sum * (this.tax / 100)) )}}円</td>
                <td>{{ sum }}円</td>
              </tr>
            </tbody>
          </v-simple-table>
        </div>
      </v-flex>
    </v-layout>
  </v-container>
</template>

listは公式にあったやつをとりあえず参考に(参考にね)書いてあります。
また削除ボタンも追加したのでscriptにその処理を書いていきます。

test.vue


<script>
export default {
  layout: 'mylayout',
  data(){
	  return {
		  name:'',
		  price:'',
		  quantity:1,
		  tax:8
	  }
  },
  //状態を変更する
  methods:{
	  add:function(){
		  if(this.name != ''){
			this.$store.dispatch(`list/addList`,{_name:this.name,_price:this.price,_quantity:this.quantity})
			this.name = ''
			this.price = ''
			this.quantity = 1
		  }

	  },
	  delete_list(list){
		  this.$store.dispatch(`list/deleteList`,list)
	  }
  },
  //状態を取得する
  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)
    },
    deleteList({commit},list){
        commit('DELETE_LIST',list)
    }
}

export const mutations = {
    ADD_LIST(state,obj) {
        state.lists.push({
            name:obj._name,
            price:obj._price,
            quantity:obj._quantity
        })
    },
    DELETE_LIST(state,list){
        var i = state.lists.indexOf(list)
        //配列の要素を削除する 開始位置,削除数
        state.lists.splice(i,1)
    }
}

渡ってきたlistのインデックス番号を調べて、そこから1つ削除しています。
これも公式のTodoリストと同じ実装方法です。

コメント

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