Hello Dapps フロントエンドの構築(Vuexについて)

[前記事へ移動](https://qiita.com/NT1123/private/e2c36b438bb712460d68)

ここではVuexを使って学んだことやVuexの使い方などを記事にしたいと思います。

## 5.1 Vuexの考え方

Vuexは、データ処理やデータの流れが一方向に限定されているのが特徴です。

データの流れは、必ずVue Component → Action → Mutation → State → Vue Componentとなります。

![6.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/9ea065a8-3ca5-07b5-e3e7-b59dec7d8af7.jpeg)


各要素の説明です。

<b>Vue component</b>
・ユーザーからの指示を受け付ける。
・VuexのActionを動作させるトリガーをVuexに伝える。


<b>Action</b>
・Mutationをcommitする関数を実行する。
・アクションは任意の非同期処理を含むことができます。

<b>Mutaion</b>
・stateの情報を更新する。(Actionで実施した結果をstateに反映させる)
・Mutationのcommitでstateを変更する。(stateを変更する唯一の方法になる)

<b>State</b>
・state にはデータを格納していきます。stateに全ての情報を詰め込んでいきます。


## 5.2 Vuexを構成するファイルの説明

###5.2.1 ルーティングの設定
![16.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/76606386-dc9d-d658-e290-a809f2fc0400.jpeg)




localhost:8080/#とlocalhost:8080/#/demoの両者を移動できるようにrouting設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/988664b5-bfb2-ae44-7208-e7e6a0c2c3a6.png)

routingは/scr/router/index.jsに記述されます。Top.vueとDemo.vueの該当部分(1-1,1-2,2-1,2-2,3-1,3-2)と書いてある行を/scr/router/index.jsの記述に合わせます。


![7.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/90db5744-5ccf-dcb3-996a-355e780deac5.jpeg)
<b>[name]</b>
1-1はtop , 1-2はdemoで「/scr/router/index.js」,「Top.vue」,「Demo.vue」間で合わせる。
<b>[component]</b>
・2-1はTop , 2-2はDemoで「/scr/router/index.js」,「Top.vue」,「Demo.vue」間で合わせる。
<b>[path]</b>
・3-1は'/', 3-2は'/demo'で設定したいURLを記述する。

###5.2.2 Vuexメイン処理ファイル demo.jsの構成
![13.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/046a4aec-454d-febe-08b6-6ca7a32d89fe.jpeg)

Vuexメイン処理ファイルdemo.jsは、構成要素が決まっております。

(1)ライブラリと変数の設定
(2)Vue.use(Vuex)
(3)Vuex構成要素
(4)export

から構成されます。詳しくは下図をご覧ください。
![9.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/20c3c30b-9207-545a-9136-3fa8d6035efd.jpeg)

###5.2.3 Webページの構成

![15.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/5d8fbdfa-64d0-505b-7799-06519560a738.jpeg)

main.jsはApp.vueを読み込みます。App.vueはTop.vue,Demo.vueのtempleteとなっています。つまり、App.vueに記載したことは、Top.vueとDemo.vueの双方に反映されます。


![14.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/7dbfdbe7-b274-f51a-3dba-2ec161dc57e0.jpeg)

###5.2.4 Vuex参照
![17.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/b4cba75f-94c8-5a96-c378-f36b3cb89ca7.jpeg)

/storeにあるactions.js, getters.js, demo.jsを取り込みexportすることによってdemo.jsでVuexが使用できるようにします。

```vuejs:/scr/store/index.js
// eslint-disable-next-line
/* eslint-disable */ 
import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import demo from './modules/demo'

Vue.use(Vuex)

export default new Vuex.Store({
  actions,
  getters,
  modules: {
    demo
  }
})
```

##5.3 VuexでのmethodとProvertyの書き方

実行するmethodや関数はすべてVuex内の「Action」の中に書きます。「Action」の中で記載された関数は、...「 mapActions([]) 」でVue.jsに読み出します。

また、変数(Property)はすべてVuex内の「State」の中に書きます。「State」の中で定義された変数は...mapGetters({})でVue.jsに読み出します。

![10.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/ce7914e9-20e7-ab60-ce1d-bd1f9ea36961.jpeg)


##5.4 Actionの中での別関数の読み出し方

VuexのActionの中で定義したある関数が他の関数を読み出す場合dispatchを使います。
下記の例では、関数update_BCDATAの中で別の関数getdata()が読み出されております。関数の読み出しにはdispatchが使われます。別の関数を読みだす場合、読み出し元の関数の引数にdispatchを入れます。

![18.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/126f751c-dd4c-d5b0-cc3c-f794f3ad04b1.jpeg)