Vuexを使用したコンポーネント間のデータ管理

概要

前回の記事の続きで今回の記事では、Vuexを使用してコンポーネント間のデータ管理を行っていきます。
メッセージ表示用のコンポーネント、メッセージ入力用のコンポーネントを作成していきます。

コンポーネントの作成

messageディレクトリを作成して、messageContent.vueとmessageForm.vueを以下の場所に作成します。

src
├── App.vue
├── assets
│   └── logo.png
├── components
│   └── message
│       ├── messageContent.vue
│       └── messageForm.vue
├── main.js
└── store.js

messageContent.vue

<template>
   <div>
       <p>{{ contentMessage }}</p>
   </div>
</template>
<script>
   export default {
       name: 'MessageContent',
       computed: {
           contentMessage() {
               return this.$store.getters.content_message;
           }
       }
   }
</script>

this.$store.getters.content_messageでストアのgetterを呼び出し、stateの情報を取得しています。その情報をcontentMessageとして表示させています。

messageForm.vue

<template>
   <input type="text" v-model="message" @input="setContentMessage">
</template>
<script>
   export default {
       name: 'MessageForm',
       data() {
           return {
               message: '',
           }
       },
       methods: {
           setContentMessage() {
               this.$store.dispatch('updateContentMessage', this.message);
           }
       }
   }
</script>

this.$store.dispatch('updateContentMessage', this.message)でストアのstateを更新しています。updateContentMessageのactionを呼び出して、this.messageを更新しています。

App.vueにコンポーネントを読み込む

App.vueにmessageContentコンポーネント、messageFormコンポーネントを読み込んで表示させます。

<template>
 <div id="app">
   <MessageContent/>
   <MessageForm />
 </div>
</template>
 
<script>
import MessageContent from './components/message/messageContent.vue'
import MessageForm from './components/message/messageForm.vue'
 
export default {
 name: 'App',
 components: {
   MessageContent,
   MessageForm,
 },
}
</script>

コンポーネント間でデータ管理

npm run serveで起動して、Webページを見てみます。

初期画面

test入力後

messageFormコンポーネントのinputに”test”と入力すると、messageContentコンポーネントに”test”が表示されました。コンポーネント間でデータ管理できました。

ひとこと

Vuexでコンポーネント間の基本的なデータ管理を行いました。Vuexには、mapGettersやmapActionsなどのヘルパーが用意されており、それを利用するとコードを短く書くことができます。