1. POPOPON

    No comment

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