1. POPOPON

    No comment

    POPOPON
Changes in body
Source | HTML | Preview
@@ -1,107 +1,107 @@
#はじめに
Vuexの`mapState`や`mapActions`って便利ですけど、色々な書き方があってややこしくないですか。
例えば、以下のケースでそれぞれ書き方が変わってきます。
- Map系ヘルパー以外の関数も定義したい場合
- モジュールの値を参照したい場合
- 値にエイリアス(別名)をつけたい場合
- 値に何らかの処理をほどこしたい場合
本記事では、いかなるケースにも対応できる決定版的な書き方を2種類ご紹介します。
#前提
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',
- userAge: 'age'
+ age: 'age'
}),
// この後にもちゃんと関数を定義できる
},
```
最初のものと違い、第2引数がオブジェクトになっています。
そのオブジェクトには、
`別名: キー名`  
という形のプロパティを定義します。
(mapStateの場合はキー名以外にfunctionも渡せますが、それは後述)
-例えば上記では`this.userId`で`id`が参照できるようになっています。
+例えば上記では`id`が`this.userId`で、`age`はそのまま`age`で参照できるようになっています。
※参照先がモジュールではない場合は第1引数を省略します。
#####補足
mapStateの場合のみキー名の代わりに「stateを引数とするfunction」を渡すことも可能です。
(Gettersで代用できる機能なのであまり使わない気はします)
```pages/index.vue
computed: {
...mapState('user', {
isAdult: state => state.age > 19, // mapStateの場合のみ
}),
},
```
`this.isAdult`でユーザの年齢が20歳以上かが取れるようになっています。
#その他の注意点
- `mapState`と`mapGetters`は`computed`内に定義する
- `mapMutations`と`mapActions`は`methods`内に定義する
- モジュールがネストしている場合は、モジュール名をスラッシュで区切って指定する。例:”user/photo”