Help us understand the problem. What is going on with this article?

Vue.js + Vuex によるカウンターのサンプルコード

概要

  • Vue.js + Vuex を使用して「+」「-」ボタンで数値が増減するカウンターを作成する

今回の環境

  • Vue.js 2.6.1
  • Vuex 3.1.3

Vuex とは

Vuex とは何か? | Vuex

Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。 これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。

ステート | Vuex

Vuex は 単一ステートツリー (single state tree) を使います。つまり、この単一なオブジェクトはアプリケーションレベルの状態が全て含まれており、"信頼できる唯一の情報源 (single source of truth)" として機能します。これは、通常、アプリケーションごとに1つしかストアは持たないことを意味します。

Vuex 入門 | Vuex

Vuex アプリケーションの中心にあるものはストアです。"ストア" は、基本的にアプリケーションの 状態(state) を保持するコンテナです。単純なグローバルオブジェクトとの違いが 2つあります。

  1. Vuex ストアはリアクティブです。Vue コンポーネントがストアから状態を取り出すとき、もしストアの状態が変化したら、ストアはリアクティブかつ効率的に更新を行います。

  2. ストアの状態を直接変更することはできません。明示的にミューテーションをコミットすることによってのみ、ストアの状態を変更します。これによって、全ての状態の変更について追跡可能な記録を残すことが保証され、ツールでのアプリケーションの動作の理解を助けます。

Vue.js + Vuex によるカウンターのサンプルコード

以下の HTML を Web ブラウザで読み込むと「+」「-」ボタンと数値が増減するカウンターが表示される。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js + Vuex ぽちぽちカウンターサンプル</title>
</head>
<body>

<div id="app">
  <p>{{ count }}</p>
  <p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="https://unpkg.com/vuex@3.1.3/dist/vuex.js"></script>

<script>

// カウンターの値を管理するストア
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    // increment: state => state.count++
    increment() {
      console.log('Call the mutations increment')
      this.state.count++
    },
    // decrement: state => state.count--
    decrement() {
      console.log('Call the mutations decrement')
      this.state.count--
    }
  }
})

new Vue({
  el: '#app',
  computed: {
    count () {
      return store.state.count
    }
  },
  methods: {
    // 「+」ボタンクリック時に呼ばれる
    increment() {
      console.log('Call the methods increment')
      // mutations の increment を呼び出す
      store.commit('increment')
    },
    // 「-」ボタンクリック時に呼ばれる
    decrement() {
      console.log('Call the methods decrement')
      // mutations の decrement を呼び出す
      store.commit('decrement')
    }
  }
})
</script>

</body>
</html>

参考資料

niwasawa
迷子になりがちな地図・位置情報系プログラマ。
http://niwasawa.hatenablog.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away