どうも、むつたくです。
近日リリース予定の弊社アプリケーションで、実際にVue.jsを使用しました。
公開されましたらこのブログにもリンクを貼りますので、是非触れてみてください。

 

SPAライクにしてあり、使用したのはvue-cli3/Vuexになります。
超小規模アプリですが、各コンポーネントで使用する変数が重複していたり、API通信をしているので、
Vuexで一元管理した方が楽だと思い、使用しています。

 

実際使用してみて、やっぱりと言うか、コードや変数の管理がすっごく楽でした。
他にもVue-cliなので、BabelやWebpackも含まれています。クロスブラウザなので必要になります。
（主にIEのため…ですがw）

 

---

 

さて、今回は、Vuexのgettersとmodulesについて紹介して行きます。

参考：公式リファレンス – ゲッター
参考：公式リファレンス – モジュール

まずは、公式を読むに限ります。困った時の公式でもあります。

 

 

(1) getters について

gettersは、Storeの状態を算出するのに使用します。
Vue.jsには各コンポーネントで使用できる算出プロパティ(computed)と言うものがあります。
Vuexでは同じことを実現させるには、gettersを使用します。

 

例えば、Vuexで管理している値を取得するコードが複数コンポーネントで使用している場合、
このgettersに書くことで、あちこちに記載されていた同じコードを纏める事ができます。
store.jsに以下のように記載します。

[cc_javascript]
// store.js
import Vue from “vue”;
import Vuex from “vuex”;

Vue.use(Vuex);

export default new Vuex.Store({
state: {
hoge: 100
},
getters: {
// アロー関数使用しない場合
getHoge: function(state) {
return state.hoge;
}
// アロー関数使用する場合
getHoge: state => state.hoge
}
});
[/cc_javascript]

 

取得する側では、以下のように記載します。

[cc_javascript]
// index.vue


[/cc_javascript]

 

gettersを呼び出しているのは、以下のコードになります。

this.$store.getters.getHoge

 

この例では微妙ですが、こうすることで、煩雑だったコードがスッキリします。
また、バグの温床になるかもしれないコードを回避することもできる…かもしれません。

 

getters内で他のgettersを呼び出したい時には、以下のようにします。

[cc_javascript]
// store.js
import Vue from “vue”;
import Vuex from “vuex”;

Vue.use(Vuex);

export default new Vuex.Store({
state: {
hoge: 100,
fuga: 250 // ★ここ追加
},
getters: {
getHoge: state => state.hoge,
HogeFuga: (state, getters) => getters.getHoge + state.fuga // ★ここ追加
}
});
[/cc_javascript]

 

[cc_javascript]
// index.vue

[/cc_javascript]

store.jsの１４行目のように、第一引数にstate、第二引数にgettersを渡すことで、ストアオブジェクトを参照することができます。
一応ですが、この書き方を「プロパティアクセススタイル」と呼びます。

 

ちなみにgettersにも引数を渡すことは可能です。これを「メソッドスタイルアクセス」と言い、
その場合の書き方は、以下のようになります。

[cc_javascript]
// store.js
import Vue from “vue”;
import Vuex from “vuex”;

Vue.use(Vuex);

export default new Vuex.Store({
state: {
hoge: 100,
fuga: 250
},
getters: {
getHoge: state => state.hoge,
HogeFuga: (state, getters) => getters.getHoge + state.fuga,
hogePlus: state => (num) => state.hoge + num // ★ここ追加
}
});
[/cc_javascript]

 

[cc_javascript]
// index.vue

[/cc_javascript]

 

キモはstore.jsの１５行目ですね。これで、データを加工したくなった場合も、容易に可能になりました。
これはプロパティアクセススタイルではできませんので、注意してください。
ともあれ、getters便利！

 

 

(2)modules について

Vuexはすごく便利なのですが、アプリに対して１つしか使用できないので、コンポーネント側はスッキリ！
でも、Storeの中身は可読性が悪く、ごちゃごちゃ…なんてことになったら、本末転倒ですね。

 

それを解消してくれるのが、modulesになります。よく言われるのがモジュール分割。

 

機能ごとに分割すれば、コードの可読性も良くなりますし、管理もし易いはずです。
プロジェクトに後から参入した方が居たとしても、理解がスムーズになったり、
共同作業が捗ったりするのではないでしょうか。

 

さて、分割の仕方ですが、以下のようになります。

[cc_javascript]
// store.js
import Vue from “vue”;
import Vuex from “vuex”;

Vue.use(Vuex);

// hogeのモジュール
const moduleA = {
namespaced: true,
state: {
hoge: 100
},
getters: {
getVal: state => state.hoge
},
mutations: {
hoge_mutations: () => {
// 省略 …
}
},
actions: {
hoge_actions: () => {
// 省略 …
}
}
};

// fugaのモジュール
const moduleB = {
namespaced: true,
state: {
fuga: 250
},
getters: {
getVal: state => state.fuga
}
};

export default new Vuex.Store({
modules: {
modA: moduleA,
modB: moduleB
}
)};
[/cc_javascript]

 

これで、モジュール分割完了です。
分割に際して、必ずと言って良いほど namespaced: true を設定します。名前空間を与えることにより、影響範囲を限定的にできますし、名前空間を与えないことにより、他のmodulesに登録済みのmutationsやactionsと言ったものが同時に実行されてしまいます。gettersに関しては、エラーが出力されます。
なので、namespaced: true を忘れないようにしましょう。

 

コンポーネント側から呼び出す際も、書き方が若干変わります。

[cc_javascript]

[/cc_javascript]

 

同じ名前のgetValにアクセスしていますが、3行目はmodAの、4行目はmodBのgetValにアクセスするよ、というようになります。
アクセスの仕方を纏めると、以下のようになります。

 

[cc_javascript]
// コンポーネント側からの呼び出し
this.$store.commit(“modA/hoge_mutations”) // mutationsの呼び出し
this.$store.dispatch(“modA/hoge_actions”) // actionsの呼び出し
this.$store.getters[“modB/getVal”] // gettersの呼び出し
[/cc_javascript]

 

このように、namespaced: true を設定することでモジュールごとのmutations、actions、gettersを呼び出せます。
gettersだけ、[]での呼び出しになっているので、そこだけは注意してください。

 

 

---

 

今回は、Vuexのgettersとmodulesについて紹介しました。
紹介と言っても基本的なことですが。

以上となります。
….Vue.jsとっても楽しいよ！