1. POPOPON

    No comment

    POPOPON
Changes in body
Source | HTML | Preview
@@ -1,119 +1,118 @@
#はじめに
Vuexの`mapState`や`mapActions`って便利ですけど、色々な書き方があってややこしいですね。
例えば、以下のケースでそれぞれ書き方が変わってきます。
- Map系ヘルパー以外の関数も定義したい場合
- モジュールの値を取ってきたい場合
- 値にエイリアス(別名)をつけたい場合
- 値に何らかの処理をほどこしたい場合
本記事では「これだけ覚えていればOK」という決定版的な書き方を(2種類)ご紹介します。
#前提
前提として、userというモジュールに、`id`と`age`というステートが定義されているとします。
```javascript:store/user.js
export const state = () => ({
id: ''
age: null
})
```
また、必要なヘルパー関数はインポートされているとします。
```javascript:pages/index.vue
<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
```
#書き方1(値を加工しない場合)
まずは、よく使う簡易的な書き方から。
ストアの値をそのまま使う場合は、以下のように書けます。
```javascript:pages/index.vue
computed: {
...mapState('user', [
'id',
'age'
]),
// この後にもちゃんと関数を定義できる
},
```
これにより、userモジュールの`id`, `age` が`this.id`, `this.age` で取得できます。
参照先がモジュールでない場合は第1引数を省略するだけです。
```javascript:pages/index.vue
...mapState([
'some',
'states'
]),
```
#書き方2(万能型)
こちらはあらゆるケースで使える書き方です。
(ただし値の加工等をしない場合は、書き方1より冗長になります)
```javascript:pages/index.vue
computed: {
...mapState('user', {
userId: 'id',
age: 'age'
}),
// この後にもちゃんと関数を定義できる
},
```
-書き方1と違い、第2引数オブジェクトになっています。
+書き方1とは異なり、第2引数にはオブジェクトを渡します。
そのオブジェクトには、
`別名: キー名`  
という形のプロパティを定義します。
-(mapState の場合はキー名以外に function も渡せますが、それは後述)
上記では`id`が`this.userId`で、`age`はそのまま`this.age`で参照できるようになっています。
#書き方2の補足
mapState の場合のみ、キー名の代わりに function を渡すことも可能です。
```javascript:pages/index.vue
computed: {
...mapState('user', {
isAdult: (state) => state.age > 19, // mapStateの場合のみ
}),
},
```
この function は state を引数に取ります。
上記では`this.isAdult`でユーザの年齢が20歳以上かが取れるようになっています。
※「値を加工するなら getters に書けばいいのでは?」と思われるかもしれませんが、例えば一つのページでしか使わない値の場合、こうすることで getters の肥大化を避けることができます。
#その他の注意点
- 参照先がモジュールではない場合は第1引数を省略する
- `mapState`と`mapGetters`は`computed`内に定義する
- `mapMutations`と`mapActions`は`methods`内に定義する
- モジュールがネストしている場合は、モジュール名をスラッシュで区切って指定する。例:”user/photo”