Vuexのインストール

内容

Vue3でVuexを導入する手順。
Viteで作成しているアプリケーションに、npmで途中から導入するときの手順。
「Vite」を使用してVueプロジェクトを立ち上げる

目次

• Vuexのインストール
• store.jsにスクリプトを記述する
• storeをアプリケーションに組み込む
• App.vueを修正（コンポーネントを読み込む）
• storeの値を取得して画面に表示する
• 画面確認

Vuexのインストール

Vue3に対応するVuexは、Ver.4以降。

npm install vuex@next

store.jsにスクリプトを記述する

プロジェクト直下にstore.jsを作成

/store.js

import { createStore } from 'vuex' // VuexのパッケージからcreateStore という関数をインポート

export const store = createStore({ // createStoreの引数にストアに関する情報をまとめたオブジェクトを指定
  state() {  // stateは、ストアに保管する値を用意しておくもの。コンポーネントのdataに相当するようなイメージ
    return { // このオブジェクトの中に、storeで利用する値をまとめておく
      message: 'This is store data.'
    }
  }
})

storeをアプリケーションに組み込む

main.js

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import { store } from './store.js' // storeをインポート

createApp(App).use(store).mount('#app') // アプリケーションに組み込み

App.vueを修正（コンポーネントを読み込む）

App.vue

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

storeの値を取得して画面に表示する

HelloWorld.vue

<template>
  <div class="alert alert-primary">
    <h1>{{ data.title }}</h1>
    <!-- $storeはstoreに保存している値のオブジェクト。$store.state.値 でアクセスできる -->
    <p class="mt-3 h5">{{ $store.state.message }}</p>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'

export default {
  setup(props) {
    const data = reactive({
      title: 'Vuex',
    })
    return {
      data
    }
  }
}
</script>

画面確認

npm run dev # 開発中ですでにサーバーが立ち上がっている場合は、⌃cで一度停止して再立ち上げする