🖥

#Vue #Nuxt 初心者向け – Vuex で store を使って、ボタンを押すと数が増えるシンプルなカウンタを作る ( simple

2023/09/01に公開

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 の分かりづらいところだと思うけど... )