Vuexミニマム導入

Vuexをモジュールで導入するときの基本的な環境設定です。
設計思想というより、最低限の動作環境を手配するやりかたになっています。

サンプルは、ページ内にVueコンポーネントのいいねボタンを複数設置し、値をVuexで共通管理する簡単な仕組みです。
ボタンはページの上と下に2箇所設置されており、片方を操作すると連動してもう片方にも変更が適用されます。

あとで本家のショッピングカートのサンプルソースもみつけました。こちらのほうが洗練されたサンプルかも。

npmパッケージ

このnpmパッケージをインストールしています。

  • Vue
  • Vuex
  • axios

axiosは、マスターのデータを外部から取得する前提で追加しました。
サンプルは、外部APIではなくHTMLに直書きされたJSONをaxiosで取得する構造にしてありますので、外部から取得する場合は適宜書き換えてください。

Vuex用のファイル追加

モジュールをまとめてimportするための、index.jsと派生するモジュールのjsを設置します。


├── src
│   ├── assets
│   │   └── ...           # 画像など素材
│   ├── components
│   │   └── like.vue      # いいねボタンvueコンポーネント
│   └── store
│       ├── index.js      # モジュールを集めてストアをエクスポートする
│       └── article
│           └── like.js   # いいねボタンの モジュール
└── App.vue               # Vueアプリ本体 
└── main.js               # HTMLから読み込むJS 

store/index.jsは、各機能のモジュールを設定したjsを読み込み
Vuex.Storemodulesに設定しています。

サンプルでc、Vuexのモジュールです。
いいねのカウントと、いいね済みのコンディションをstoreに持たせています。

like.jsの中、モジュールでは
Vuexではおなじみのstategettersmutationsactionsのほか
モジュールの特徴として、namespaced: trueも設定しexportしています。

モジュールの追加

プロジェクトが発展して新しいVuexモジュールを追加したいときは、store/article配下に新しいjsファイルを設置し、
store/index.jsで既存のモジュールと同様にインポートしてmodulesに追加します。

VueコンポーネントでVuexを参照する設定

Vueアプリの本体、App.vuecomponents/like.vueに、Vuexとデータをやりとりするための設定をします。


├── src
│   ├── assets
│   │   └── ...           # 画像など素材
│   ├── components
│   │   └── like.vue      # いいねボタンvueコンポーネント
│   └── store
│       ├── index.js      # モジュールを集めてストアをエクスポートする
│       └── article
│           └── like.js   # いいねボタンの モジュール
└── App.vue               # Vueアプリ本体 
└── main.js               # HTMLから読み込むJS 

App.vueでは、components/like.vueの読み込みと設置のほか
Vuexのstore/index.jsを読み込み、Appstoreとして設定ます。
書き出し後のmountedでは、axiosで初期値を取り寄せstoreへ書き込むdispatchを実行します。

Vueコンポーネントからはcomputedでgettersを監視

Vuexで値を共有するコンポーネントでは、computedgettersを監視しておくと
別のところでstoreが更新されたタイミングで最新の状態を取得でき使い良いです。

  computed: {
    count() {
      return this.$store.getters["article/count"];
    },
    checked() {
      return this.$store.getters["article/checked"];
    }
  },

ほか、ボタンを押したときのstore更新するために、 @clickにカウントとコンディションを書き換えるdispatchを実行するメソッドを紐づけておきます。

    updateStatus() {
      this.$store.dispatch("article/updateData", {
        current: this.id,
        count: this.count + (this.checked ? -1 : 1),
        checked: !this.checked
      });
    }

Vuexは小規模にも導入できる

Vuexは大規模プロジェクト向きというイメージが強いですが、このサンプルのよう最低限の設定ならば、導入コストも大したものではないし手軽に便利な部分を取り入れることができます。

同じ機能のボタンを複数設置するからVueで値の共有を効率化したいけれど
プロジェクトの都合でページ全体をVueアプリにはできないので、親子間で値の受け渡しをさせられない…
こんな縛りがあるケースも、Vuexを部分使いすると対応できます。

関連記事