🖥
#Vue #Nuxt 初心者向け – Vuex で store を使って、ボタンを押すと数が増えるシンプルなカウンタを作る ( simple
NOTE
- Nuxt プロジェクトを作成しておく (
yarn create nuxt-app my-project
) - クラシックモードとモジュールモードがあるらしいが、クラシックモードは廃止予定のようなので、モジュールモードを利用する (モードの違いなんていうものは忘れよう)
store/increments.js
- とてもシンプルな書き方が出来る
- state に状態を定義する
- mutations に変更処理を書く
export const state = () => ({
count: 1
})
export const mutations = {
increment (state) {
state.count++
},
}
pages/increment.vue
- Vue script の method から store の処理を呼び出している (処理をラップしている感じ)
- computed で値の計算をして、 Vue テンプレートでの
{{ count }}
に紐づけている -
$store.commit
の引数が$store.commit('storeのファイル名/storeの関数名)
という形式で対応してるみたいだ
// https://nuxtjs.org/guide/vuex-store/
<template>
<div>
<div>
<h1> {{ count }} </h1>
<input type="button" @click="incrementCounter" value="Increment!">
</div>
</div>
</template>
<script>
export default {
computed: {
count () {
return this.$store.state.increments.count
}
},
methods: {
incrementCounter (e) {
this.$store.commit('increments/increment')
}
}
}
</script>
<style>
body {
text-align: center;
}
</style>
- このように component に対しての呼び出しも値の取得も、ラップして書いてやるのが流儀というか、やや迂遠な気もするけれど、こういうものとして覚えておくか
- store の仕組みとは全く関係ないが、この例の場合トップレベルのcomponentなので、export default っていう名前なのに 別に export してる感はないけど、気にしない ( 根本的に Vue の分かりづらいところだと思うけど... )
動作
yarn dev で起動している場合
http://localhost:3000/increment にアクセスしてボタンを押す
参考
なぜカウンタの例とTODOリストの例が一緒に出てくるのだろうか...
クラシックモードとかモジュールモードとか state とか mutation とか、書き方に種類があってよくわからないのと、公式ドキュメントも断片的すぎていやはやという感じ
Original by Github issue
チャットメンバー募集
何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。
公開日時
2020-05-03
Discussion