Madea-K Dev

プログラムのメモや日々思ったことなど

< 35歳迄に起業し1000万円以上稼ぐ >

Vuex

Vuex : https://vuex.vuejs.org/ja/
Nuxt Vuex : https://ja.nuxtjs.org/guide/vuex-store/

コアコンセプト

1. コンポーネントから dispatch にて actionハンドラが動作する。
2. action からコミットして mutation にて state の状態を変更する。
3. 状態変更された state 値は getters を通して state にアクセスできる。

コアコンセプトのポイント

1. actionハンドラを通さない場合は、コンポーネントから commit して直接 mutation の値を変更できる。

※アクションを通すか通さないかは、公式には下記のように書かれています。
アクションは、状態を変更するのではなく、ミューテーションをコミットします。
アクションは任意の非同期処理を含むことができます。

2. コンポーネントから this.$store.state.count の用に直接 state にアクセスできるが、値も変更も出来てしまうために getter を通して state にアクセスする。

その他

1. モジュールモードを使用して書くこと (クラシックモードは廃止されるので)
モジュールモードかどうかの識別
– index.jsがストアオブジェクトをexportしない
– またはindex.jsが存在しない
参考 : https://qiita.com/y-miine/items/028c73aa3f87e983ed4c#%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88
例 : https://github.com/maeda-k/maeda-k.dev/tree/master/store
2. ヘルパー関数を使う
参考 : https://qiita.com/POPOPON/items/37ef8833a76a2e87dea9

/ Vue-Nuxt

×