1. POPOPON

    No comment

    POPOPON
Changes in body
Source | HTML | Preview
@@ -1,131 +1,131 @@
#はじめに
Vuexの`mapState`や`mapActions`って便利ですけど、色々な書き方があってややこしいですね。
例えば、以下のケースでそれぞれ書き方が変わってきます。
- ヘルパー以外のプロパティも定義したい場合
- モジュールから値を取ってきたい場合
- 値にエイリアス(別名)をつけたい場合
- 値に何らかの処理をほどこしたい場合
本記事では「これだけ覚えていればOK」という書き方を(2種類)ご紹介します。
#前提
前提として、userというモジュールに、`id`と`age`というステートが定義されているとします。
```javascript:store/user.js
const user = {
state: {
id: ''
age: null
},
namespaced: true,
}
```
また、必要なヘルパー関数はインポートされているとします。
```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:モジュールじゃない場合
...mapState([
'some',
'states'
]),
```
-他の3つのヘルパーでも同様に書けます。
+他の3つのヘルパーでも同様に書けるので省略します。
(ただし`mapMutations`と`mapActions`は`methods`内に定義します)
#書き方2(万能型)
こちらはあらゆるケースで使える書き方です。
(ただしエイリアスや値の加工が不要な場合は、書き方1より冗長になります)
```javascript
computed: {
...mapState('user', {
userId: 'id',
isAdult: (state) => state.age > 19, // 成人かどうかを Boolean で返す func.
}),
// この後にもちゃんと関数を定義できる
},
```
書き方1とは異なり、第2引数にはオブジェクトを渡します。
そのオブジェクトには、
`別名: '取得したいキー名'` あるいは
`別名: function` (ただし MapGetters 以外)
という形のプロパティを定義します(function を渡す書き方は下で解説します)。
:point_up:のコードでは、
- `this.userId`で user の`id`が取得できる
- `this.isAdult`で「年齢が20歳以上かどうか」が取得できる
ようになっています。
#####補足(値を加工する場合)
`mapState, mapMutations, mapActions`では、オブジェクトのプロパティに function を渡すことで、値(または関数)の加工が行えます。
`mapState`の場合は`state`を引数とし、加工した値を戻り値とします。
`mapMutations, mapActions`の場合は`commit, dispatch`を引数とし、行いたい処理を記述します。
[mapActions の実例][1]を置いておきます。
※「値を加工するなら getters に書けばいいのでは?」と一瞬思いましたが、例えば一つのページでしか使わないような値の場合、こうすることで getters の肥大化が避けられそうです。
#その他の注意点
- ヘルパーを書く場所
- `mapState, mapGetters`は`computed`内
- `mapMutations, mapActions`は`methods`内
- 参照先がモジュールではない場合は第1引数を省略する
- モジュールがネストしている場合は、モジュール名をスラッシュで区切って指定する。例:”user/photo”
###参考
[Vuex:mapStateの書き方8パターン+11サンプルコード][2]
[1]:https://github.com/vuejs/vuex/blob/caa663d69608fc36d1a88746df28961437d38786/examples/chat/components/MessageSection.vue
[2]:https://qiita.com/suin/items/7331905a45a8ff80d4dd