1. nishina555

    修正

    nishina555
Changes in body
Source | HTML | Preview
@@ -1,167 +1,167 @@
## はじめに
Vuexの以下ヘルパーについて、最低限の使い方をまとめました。
大きく分けて以下**2つに分けて覚えればOK**です。
### 1.状態を呼び出す
- `mapState`
- `mapGetters`
### 2.状態を変化させる
- `mapMutations`
- `mapActions`
※Vuexの**導入方法**や**`state`とは?**という基本については当記事では触れていません。
## 環境
```yaml
OS: macOS Catalina 10.15.1
Vue: 2.6.10
vuex: 3.1.2
```
## `map○○`を使うメリット
以下のように**シンプルに呼び出せること**が最大のメリットです。
```javascript
this.$store.state.state1 //通常
this.state1 //mapState使用
this.$store.getters.getter1 //通常
this.getter1 //mapGetters使用
this.$store.commit('mutation1', 引数) //通常
this.mutation1(引数) //mapMutations使用
this.$store.dispatch('action1', 引数) //通常
this.action1(引数) //mapActions使用
```
## 使い方
### 1.Vuexから使うヘルパーをインポート
まず、全てのヘルパーに**共通の作業**です。
以下のように**そのコンポーネント内**で使うヘルパーをインポートします。
```javascript:Anything.vue
<script>
import { mapState } from 'vuex'
//...
</script>
```
複数使う場合は`,`区切りで書けばOKです。
```javascript:Anything.vue
<script>
import { mapGetters, mapMutations } from 'vuex'
//...
</script>
```
---
### 2.必要な`state`, `getters`, `mutations`, `actions`をリストアップ
このリストアップ方法は複数ありますが、そのバリエーションは公式ドキュメントや他記事をご参照下さい。
当記事では最も使われると思われる
- **スプレッド演算子**を使用して書く
- **ストア内の名前**と**テンプレート内で呼び出す名前**が同じになる
というパターンのみ記載します。
※ここから書く場所が
1. `computed`内
2. `methods`内
の2通りに分かれるのでご注意下さい。
#### 2-1.`mapState`, `mapGetters`の場合
#### `computed`内に書く
※mapGettersの場合を例にします。
```javascript:Anything.vue
<script>
import { mapGetters } from 'vuex'
export default {
//...
computed: {
...mapGetters([
'getter1',
'getter2'
]),
//スプレッド演算子を使うと他のものと共存できる。
otherComputed() {
//...
}
//...
}
</script>
```
#### 2-2.`mapMutations`, `mapActions`の場合
#### `methods`内に書く
```javascript:Anything.vue
<script>
- import { mapGetters } from 'vuex'
+ import { mapActions } from 'vuex'
export default {
//...
methods: {
...mapActions([
'action1',
'action2'
]),
//スプレッド演算子を使うと他のものと共存できる。
otherMethod() {
//...
}
//...
}
</script>
```
---
### 3.テンプレート内でリストアップしたものを使用する
#### 3-1.`mapState`, `mapGetters`
以下のように呼び出せます。
冒頭で触れたとおり、**非常にシンプルです**。
```javascript:Anything.vue
this.getter1
this.getter2
```
#### 3-2.`mapMutations`, `mapActions`
以下のように呼び出せます。
該当のactionに**引数がある場合**、`()`内に引数を入れればOKです。
```javascript:Anything.vue
this.action1(引数)
this.action2(引数)
```
## おわりに
最後まで読んで頂きありがとうございました:bow_tone1:
どなたかの参考になれば幸いです:relaxed:
## 参考にさせて頂いたサイト(いつもありがとうございます)
- [ステート | Vuex](https://vuex.vuejs.org/ja/guide/state.html)
- [ゲッター | Vuex](https://vuex.vuejs.org/ja/guide/getters.html)
- [ミューテーション | Vuex](https://vuex.vuejs.org/ja/guide/mutations.html)
- [アクション | Vuex](https://vuex.vuejs.org/ja/guide/actions.html)
- [モジュール | Vuex](https://vuex.vuejs.org/ja/guide/modules.html)