NuxtでVuexを使用する

Nuxt

NuxtではVuexを簡単使えます。
なんかクラシックモードは廃止予定らしいのでモジュールモードのストアを利用します。

今回はTodoリストでなく買い物リストを作ります。

まずは、storeフォルダにlist.jsを作りました。

export const state  = () => ({
    lists: [
        {name:"牛乳",price:160},
        {name:"りんご",price:200}
    ]
})

export const mutations = {
    add(state,obj) {
        state.lists.push({
            name:obj._name,
            price:obj._price
        })
    }
}

これを利用するページをpagesフォルダに作ります。
一旦test.vueという名前のファイルを作りました。

<template>
	<v-container>
		<v-layout justify-center row>
			<v-flex xs11 md10>
				<div id="main-area">
					<h1>超リッチな買い物リスト</h1>
					税率<input type="text" placeholder="税額" value="8"><label for="">%</label>


					<v-layout justify-space-around>

						<v-flex xs6 md5>
							<v-text-field
								
								label="商品名"
								required
							></v-text-field>
						</v-flex>

						<v-flex xs6 md5>
							<v-text-field
								
								label="値段"
							></v-text-field>
						</v-flex>

					</v-layout>

					<v-layout justify-space-around>

						<v-flex xs10>
							<v-btn block color="secondary" @click='add' dark>ADD</v-btn>
						</v-flex>
						
					</v-layout>


					<div id="list-area">

						<ul>
							<li>
							{{$store.state.list.lists}}
						
							</li>
							<li>ペプシコーラ<input type="text"><label for="">円</label></li>
							<li>チャオチュール<input type="text"><label for="">円</label></li>
						</ul>

					</div>

				税込9999円
				税抜8888円
					
				</div>
			</v-flex>
		</v-layout>
	</v-container>
</template>

<script>
export default {
  layout: 'mylayout',
  methods:{
	  add:function(){
		  this.$store.commit(`list/add`,{_name:"バナナ",_price:100})
	  }
  }
}
</script>
<v-flex xs10>
<v-btn block color="secondary" @click='add' dark>ADD</v-btn>
</v-flex>

ボタンを押すとaddアクション呼び出されます。

methods:{
add:function(){
this.$store.commit(`list/add`,{_name:"バナナ",_price:100})
}
}

一旦、バナナ100円というものだけを追加しています。
この引数は第二引数までしか渡らない?ようで
複数渡したいときはオブジェクトで渡しています。

コメント

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