常連

## 【やりたいこと】
modal.vue内でstoreのgettersのmodalDatasオブジェクト配列のusername（ユーザー名）とmyWallet（ウォレット）をid（usersのインデックス）を指定してコンポーネントに表示させたい

## イメージ
![![イメージ説明](1e5694b3f68ab3e2120256aa726b3b60.png)説明](8b73cd069181d01e673ec4c424e87a6c.png)](bbd55646e5d4333b66289cd0576a0463.png)

## 現在
![イメージ説明](c82ba5b6ba60dfb7352e7a25d6c86279.png)

modalDatas配列の構造は以下
```
modalDatas = [
 { "id": 0, "username": "test2", "myWallet": 500 },
 { "id": 0, "username": "test4", "myWallet": 500 },
 { "id": 0, "username": "test3", "myWallet": 500 }
]
```

## 【質問】
modal.vue内でどのように表示させるかわからず詰まっています。。
調査しているのですが、storeのstateやgettersのオブジェクトの中身をコンポーネントで表示する方法が見つけられず。。アドバイスいただけないでしょうかmm

## コード
store/index.js
```js

/* eslint-disable */
"use strict"

import Vue from 'vue'
import Vuex from 'vuex'
import firebase from 'firebase'
import router from '@/router'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        username: '',
        email: '',
        password: '',
        myWallet: '',
        users: [],
        modalDatas: [],
    },
    getters: {
        username: state => {
           return state.username
        },
        email: state => {
           return state.email
        },
        password: state => {
           return state.password
        },
        myWallet: state => {
           return state.myWallet
        },
        users: state => {
           return state.users
        },
        modalDatas: state => {
           return state.modalDatas
        },
    },
    mutations: {
        // 新規登録時ユーザ情報登録
        registerUserData (state, payload) {
            state.email = payload.email
            state.password = payload.password
            state.username = payload.username
            state.myWallet = payload.myWallet
        },
        // ログイン時ユーザ情報をセット
        setUserData (state, doc) {
            state.username = doc.data().username
            state.myWallet = doc.data().myWallet
        },
        // ログイン時登録ユーザ名をセット
        setUsersData (state, users) {
            state.users = users
        },
        // ログイン時モーダル内のデータをセット
        setModalDatas (state, modalDatas) {
            state.modalDatas = modalDatas
        },
    },
    actions: {
        // 新規登録
        signUp (context, payload) {
            // firebase Authにユーザ情報登録
            firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password)
                .then(() => {
                    // firebase Authのユーザ名更新
                    const user = firebase.auth().currentUser
                    user.updateProfile({
                    displayName: payload.username,
                    },)
                .then(() => {
                    // データベースへ登録
                    const db = firebase.firestore();
                    db.collection("userData").doc(user.uid).set({
                        uid: user.uid,
                        email: payload.email,
                        password: payload.password,
                        username: payload.username,
                        myWallet: payload.myWallet,
                    })
                })
                .then(() => {
                    context.commit('registerUserData', payload)
                })
                .then(() => {
                    router.push('/')
                })
                })
                .catch(error => {
                    alert(error.message)
                })
        },
        // ログイン
        signIn (context, payload) {
            // 登録済みのメールアドレスとパスワードでログイン
            firebase.auth().signInWithEmailAndPassword(payload.email, payload.password)
            .then(() => {
                // ログインしているユーザーの名前を取得
                const user = firebase.auth().currentUser
                const docRef = firebase.firestore().collection("userData").doc(user.uid);
                docRef.get()
                .then((doc) => {
                    if (doc.exists) {
                        context.commit('setUserData', doc)
                    } else {
                        console.log("No such document!");
                    }
                }).catch((error) => {
                    alert(error.message)
                });
            })
            // ログインユーザー以外の登録ユーザを配列で取得
            .then(() => {
                const users = []
                const user = firebase.auth().currentUser
                const db = firebase.firestore();
                db.collection("userData")
                    .where(firebase.firestore.FieldPath.documentId(), "!=", user.uid)
                    .get()
                    .then((querySnapshot) => {
                        querySnapshot.forEach((doc) => {
                            users.push(doc.data().username)
                            context.commit('setUsersData', users)
                        });
                    });
            })
            .then(() => {
                router.push('/')
            })
            .catch(error => {
                alert(error.message)
            })
        },
        modalSet (context, usersIndex) {
            const modalDatas = [];
            const user = firebase.auth().currentUser
            const db = firebase.firestore();
            db.collection("userData")
                .where(firebase.firestore.FieldPath.documentId(), "!=", user.uid)
                .get()
                .then((querySnapshot) => {
                    querySnapshot.forEach((doc) => {
                        // クリックで選択されたユーザーのデータを作成
                        const modalData = {
                            uid: usersIndex,
                            username: doc.data().username,
                            myWallet: doc.data().myWallet
                        }
                        modalDatas.push(modalData)
                        context.commit('setModalDatas', modalDatas)
                        console.log(modalDatas)
                    });
                });
        },
        // ログアウト
        signOut () {
            firebase.auth().signOut().then(() => {
                router.push('/signin')
            })
        },
    },
});

export default store

```

DashBoard.vue

```vue
<template>
  <div class="userList">
    <header>
      <h2 class="header">{{ $store.getters.username }}さんようこそ！！</h2>
      <nav class="pc-nav">
        <h2 class="header">残高：{{ $store.getters.myWallet }}</h2>
        <button class="button header" @click="signOut">ログアウト</button>
      </nav>
    </header>
    <div class="main">
      <h1>ユーザ一覧</h1>
      <table>
        <tr>
          <th>ユーザ名</th>
        </tr>
        <tr v-for="(user, index) in $store.getters.users" v-bind:key="index">
          <td>{{ index }}</td>
          <td>{{ user }}</td>
          
          <td><button class="button2" v-on:click="openModal(index)">walletを見る</button></td>
          <td><button class="button2">送る</button></td>
        </tr>
      </table>
      <div>
        <transition>
          <modal
            v-show="showContent"
            v-on:click="closeModal"
            @open="showContent = true"
            @close="showContent = false"
          ></modal>
            
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import modal from '@/components/modal.vue'

export default {
  components: {
    modal,
  },
  data () {
    return {
      showContent: false,
      usersIndex: '',
    }
  },
  methods: {
    signOut () {
      this.$store.dispatch('signOut')
    },
    openModal (index){
      this.showContent = true
      // モーダルセットようのデータ作成
      this.usersIndex = index
      // this.usersIndex.forEach((userIndex, index) => { // 修正箇所： idの振り直し
      //   userIndex.id = index;
      // })
      const usersIndex = this.usersIndex
      // storeに渡す
      this.$store.dispatch('modalSet', usersIndex)
    },
    closeModal (){
      this.showContent = false
    },
  }
}
</script>
```

modal.vue

```vue
<template>
  <div id="overlay" v-show="showContent">
    <div id="main-content">
      <p>{{ $store.getters.modalDatas }}さんの残高</p>
      
      <div id="button-content">
        <p><button v-on:click="closeModal" class="modal-button">close</button></p>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */

export default {
  // props: {
  //     index: Number
  // },
  data () {
    return {
      showContent: false
    }
  },
  methods: {
    openModal (){
      this.$emit("open", this.showContent);
    },
    closeModal (){
      this.$emit("close", this.showContent);
    }
  }
}
</script>

```

質問編集履歴