コンポーネントからVuexにアクセスするには二つの方法があります。
- this.$storeにより直接使う方法
- Vuexが提供しているヘルパー関数を使用する方法
this.$storeによるアクセス
ルートのコンポーネント作成時にストアオプションを記述してコンポーネントに渡す定義をします。
|
1 2 3 4 |
new Vue({ //いろいろな処理 store }) |
このstoreオプションにはストアのインスタンスが入っているのでステートの取得やアクションの実行等ストアの操作を実行することが可能です。
ヘルパー関数によるアクセス
下記の種類があります。これらのヘルパー関数でステート、ゲッター、ミュテーション、アクションをコンポーネントの算出プロパティやメソッドに結びつけることが可能です。
- mapState
- mapGetters
- mapMutations
- mapActions
メリット
- コンポーネント側から簡単にストアを使うことが可能になります。
構文
通常の書き方
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> import {mapState,mapMutations} from 'vuex' export default{ //$store.state.data1をthis.data1に結びつけます。 computed:mapState([ 'data1' ]) //$store.commit('ミュテーション名',ペイロード)をthis.ミュテーション名(ペイロード)に結びつけます。 methods:mapMutations([ 'ミュテーション名' ]) } </script> |
ただ、これだとcomputedにストアのステートが紐づいてしまい通常の算出プロパティを定義する場所がなくなってしまいます。
通常の算出プロパティとヘルパー関数を共存させる記述方法
オブジェクトスプレッド演算子（...）を使えば共存させることが可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<script> import {mapState,mapMutations} from 'vuex' export default{ //$store.state.data1をthis.data1に結びつけます。 computed: 通常の算出プロパティ名 () { return 計算 }, ...mapState([ 'data1' ]) } </script> |
この記事へのコメントはありません。