why

仕事で store をたくさん使うから。Module export 訳がわからないよ！

CDN と npm インストール

vuex.vuejs.org

https://unpkg.com/vuex@2.0.0

これを CDN のように利用するか

npm install vuex --save

npm でインストール

こうやって使用を宣言する。

vue cli でプロジェクト作成

React の Create React App 。基本的にこれを使ってプロジェクトを生成する。

数分かかる。なかなか重い。

vue create vuex

Vue CLI v4.5.13
✨  Creating project in /Users/kaede/code/vuex.
⚙️  Installing CLI plugins. This might take a while...

⸨         ░░░░░░░░░⸩ ⠧ reify:@vue/cli-plugin-babel: timing reify:lo

added 49 packages in 12s
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project vuex.

f:id:kei_s_lifehack:20210803093826p:plain

これで生成されて走るようになった。

Terminal で vuex を入れる

npm i vuex

これはデフォでは入ってないから入れる必要がある

これで環境ができた

main.js に store/index の読み込みを書いて、store で state と commit を使う。

main.js のデフォルトを見てみる

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

vue cli で作るとこうなっている

main.js で Vuex を import して use する

import Vuex from 'vuex'
Vue.use(Vuex)

入れた npm の modules から、 vuex を呼んで、使う宣言をする

main.js で store を読み込んでマウントライフサイクルに組み込む

import store from './store'

new Vue({
  render: h => h(App),
  store,
}).$mount('#app')

store の定義を別の store ファイルから export されたものを import するようにして

html div id app をマウントしているところに import されている store を追加する

store の参照元の定義を作成する

~/store/index.js を作成する

ここも vue ファイルではなく、js ファイルで書く

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

vue と vuex 使う宣言はここでも必要。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

export default store

Store は S が大文字なので注意！これがないと default.constructor がないエラーになる

Vuex store と state の定義

state に関数を加算する関数の定義を作成して

export する。最後のが一番大事。 store は作っただけではどこからでも使えることにはらない。

これによって、main 及び、main が呼び出している App でも

import すれば、この store の state 及び mutation にアクセスできるようになった。

store.commit('increment')

console.log(store.state.count) // -> 1

とりあえずこのストアファイル store/index.js 内で使用してみる。

ちなみに store を定義するだけで一切呼び出さないと、それはそれでエラーになる

f:id:kei_s_lifehack:20210804151256p:plain

すると App で使用されて、1 が帰ってくる

f:id:kei_s_lifehack:20210804151350p:plain

store.commit('increment') を削ると、加算されないので 0 が帰ってくる。

これで store では使えていることがわかった。

次はこれを外部コンポーネントである App.vue で呼び出してみる。

App で store の値を呼び出したり変更する。

App の computed から store の state count を呼び出す

state は計算が反映されるように computed に定義する必要があるようだ。

App で呼び出してみる。

import は App をマウント？している main.js で行われているので不要。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    {{ count }}
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  },
  computed: {
    count() {
      return this.$store.state.count
    }
  }
}
</script>

f:id:kei_s_lifehack:20210804162602p:plain

これで、store state の count の 1 が画面に描画された！

App の mounted() で html 作成後に store の mutation を commit で呼び出す

export default {
  name: 'App',
  components: {
  },
  mounted() {
    this.$store.commit('increment')
  },
  computed: {
    count() {
      return this.$store.state.count
    }
  }
}

mounted() を追加し、html のレンダリング時に store の加算メソッドを呼び出す

f:id:kei_s_lifehack:20210806115843p:plain