1. POPOPON

    Posted

    POPOPON
Changes in title
+Vuexのmap系ヘルパーの書き方決定版!
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,91 @@
+#はじめに
+
+Vuexの`mapState`や`mapActions`って便利ですけど、色々な書き方があってややこしいですね。
+
+例えば、以下のケースでそれぞれ書き方が変わってきます。
+
+- ヘルパー以外の関数も定義したい場合
+- モジュールの値を取りたい場合
+- 値にエイリアス(別名)をつけたい場合
+- 値に何らかの処理をほどこしたい場合
+
+本記事では、いかなるケースにも対応できる決定版的な書き方をご紹介します。
+
+#前提
+
+userというモジュールに、idとageというステートが定義されているとします。
+
+```store/user.js
+export const state = () => ({
+ id: ''
+ age: null
+})
+```
+
+また、必要なヘルパー関数はインポートされているとします。
+
+```pages/index.vue
+<script>
+import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
+
+```
+
+#決定版1(エイリアスを使わない場合)
+
+決定版と言いつつ場合分けをしていますが、主にこちらの書き方のほうがよく使うと思います。
+
+```pages/index.vue
+ computed: {
+ ...mapState('user', [
+ 'id',
+ 'age'
+ ]),
+
+ // この後にもちゃんと関数を定義できる
+ },
+```
+
+この書き方で、user モジュールの`id`, `age` が`this.id`, `this.age`で参照できるようになります。
+
+※取得先がモジュールではない場合は第1引数を省略します。
+
+#決定版2(万能型)
+
+こちらはあらゆるケースで使える書き方です。
+(ただしエイリアスを使わない場合は冗長な書き方になります)
+
+```pages/index.vue
+ computed: {
+ ...mapState('user', {
+ userId: 'id', // 'userId'というエイリアスをつける
+ isAdult: state => state.age > 19, // mapStateの場合は関数を渡すこともできる
+ }),
+
+ // この後にもちゃんと関数を定義できる
+ },
+```
+
+最初のものと違い、第2引数がオブジェクトになっています。
+そのオブジェクトには、
+
+- `別名: String`
+- `別名: function(state){}` (mapStateの場合のみ)
+
+という形のプロパティを定義します。
+
+例えば上記では`this.userId`で`id`が参照できるようになり、`this.isAdult`でユーザの年齢が20歳以上かが取れるようになっています。
+
+※取得先がモジュールではない場合は第1引数を省略します。
+
+#その他の注意点
+
+- `mapState`と`mapGetters`は`computed`内に定義する
+- `mapMutations`と`mapActions`は`methods`内に定義する
+
+
+
+
+
+
+
+