Vue firestore モーダル内にオブジェクト内の特定のプロパティを表示させたい

【やりたいこと】

modal.vue内でstoreのgettersのmodalDatasオブジェクト配列のusername（ユーザー名）とmyWallet（ウォレット）をid（usersのインデックス）を指定してコンポーネントに表示させたい

イメージ

](bbd55646e5d4333b66289cd0576a0463.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
1
2/* eslint-disable */
3"use strict"
4
5import Vue from 'vue'
6import Vuex from 'vuex'
7import firebase from 'firebase'
8import router from '@/router'
9
10Vue.use(Vuex)
11
12const store = new Vuex.Store({
13    state: {
14        username: '',
15        email: '',
16        password: '',
17        myWallet: '',
18        users: [],
19        modalDatas: [],
20    },
21    getters: {
22        username: state => {
23           return state.username
24        },
25        email: state => {
26           return state.email
27        },
28        password: state => {
29           return state.password
30        },
31        myWallet: state => {
32           return state.myWallet
33        },
34        users: state => {
35           return state.users
36        },
37        modalDatas: state => {
38           return state.modalDatas
39        },
40    },
41    mutations: {
42        // 新規登録時ユーザ情報登録
43        registerUserData (state, payload) {
44            state.email = payload.email
45            state.password = payload.password
46            state.username = payload.username
47            state.myWallet = payload.myWallet
48        },
49        // ログイン時ユーザ情報をセット
50        setUserData (state, doc) {
51            state.username = doc.data().username
52            state.myWallet = doc.data().myWallet
53        },
54        // ログイン時登録ユーザ名をセット
55        setUsersData (state, users) {
56            state.users = users
57        },
58        // ログイン時モーダル内のデータをセット
59        setModalDatas (state, modalDatas) {
60            state.modalDatas = modalDatas
61        },
62    },
63    actions: {
64        // 新規登録
65        signUp (context, payload) {
66            // firebase Authにユーザ情報登録
67            firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password)
68                .then(() => {
69                    // firebase Authのユーザ名更新
70                    const user = firebase.auth().currentUser
71                    user.updateProfile({
72                    displayName: payload.username,
73                    },)
74                .then(() => {
75                    // データベースへ登録
76                    const db = firebase.firestore();
77                    db.collection("userData").doc(user.uid).set({
78                        uid: user.uid,
79                        email: payload.email,
80                        password: payload.password,
81                        username: payload.username,
82                        myWallet: payload.myWallet,
83                    })
84                })
85                .then(() => {
86                    context.commit('registerUserData', payload)
87                })
88                .then(() => {
89                    router.push('/')
90                })
91                })
92                .catch(error => {
93                    alert(error.message)
94                })
95        },
96        // ログイン
97        signIn (context, payload) {
98            // 登録済みのメールアドレスとパスワードでログイン
99            firebase.auth().signInWithEmailAndPassword(payload.email, payload.password)
100            .then(() => {
101                // ログインしているユーザーの名前を取得
102                const user = firebase.auth().currentUser
103                const docRef = firebase.firestore().collection("userData").doc(user.uid);
104                docRef.get()
105                .then((doc) => {
106                    if (doc.exists) {
107                        context.commit('setUserData', doc)
108                    } else {
109                        console.log("No such document!");
110                    }
111                }).catch((error) => {
112                    alert(error.message)
113                });
114            })
115            // ログインユーザー以外の登録ユーザを配列で取得
116            .then(() => {
117                const users = []
118                const user = firebase.auth().currentUser
119                const db = firebase.firestore();
120                db.collection("userData")
121                    .where(firebase.firestore.FieldPath.documentId(), "!=", user.uid)
122                    .get()
123                    .then((querySnapshot) => {
124                        querySnapshot.forEach((doc) => {
125                            users.push(doc.data().username)
126                            context.commit('setUsersData', users)
127                        });
128                    });
129            })
130            .then(() => {
131                router.push('/')
132            })
133            .catch(error => {
134                alert(error.message)
135            })
136        },
137        modalSet (context, usersIndex) {
138            const modalDatas = [];
139            const user = firebase.auth().currentUser
140            const db = firebase.firestore();
141            db.collection("userData")
142                .where(firebase.firestore.FieldPath.documentId(), "!=", user.uid)
143                .get()
144                .then((querySnapshot) => {
145                    querySnapshot.forEach((doc) => {
146                        // クリックで選択されたユーザーのデータを作成
147                        const modalData = {
148                            uid: usersIndex,
149                            username: doc.data().username,
150                            myWallet: doc.data().myWallet
151                        }
152                        modalDatas.push(modalData)
153                        context.commit('setModalDatas', modalDatas)
154                        console.log(modalDatas)
155                    });
156                });
157        },
158        // ログアウト
159        signOut () {
160            firebase.auth().signOut().then(() => {
161                router.push('/signin')
162            })
163        },
164    },
165});
166
167export default store
168

DashBoard.vue

vue
1<template>
2  <div class="userList">
3    <header>
4      <h2 class="header">{{ $store.getters.username }}さんようこそ！！</h2>
5      <nav class="pc-nav">
6        <h2 class="header">残高：{{ $store.getters.myWallet }}</h2>
7        <button class="button header" @click="signOut">ログアウト</button>
8      </nav>
9    </header>
10    <div class="main">
11      <h1>ユーザ一覧</h1>
12      <table>
13        <tr>
14          <th>ユーザ名</th>
15        </tr>
16        <tr v-for="(user, index) in $store.getters.users" v-bind:key="index">
17          <td>{{ index }}</td>
18          <td>{{ user }}</td>
19          <!-- <td><input class="button2" type="button" value="walletを見る" v-on:click="openModal" v-model="comment"></td>
20          <td><input class="button2" type="button" value="送る"></td> -->
21          <td><button class="button2" v-on:click="openModal(index)">walletを見る</button></td>
22          <td><button class="button2">送る</button></td>
23        </tr>
24      </table>
25      <div>
26        <transition>
27          <modal
28            v-show="showContent"
29            v-on:click="closeModal"
30            @open="showContent = true"
31            @close="showContent = false"
32          ></modal>
33            <!-- :index='usersIndex' -->
34        </transition>
35      </div>
36    </div>
37  </div>
38</template>
39
40<script>
41/* eslint-disable */
42import modal from '@/components/modal.vue'
43
44export default {
45  components: {
46    modal,
47  },
48  data () {
49    return {
50      showContent: false,
51      usersIndex: '',
52    }
53  },
54  methods: {
55    signOut () {
56      this.$store.dispatch('signOut')
57    },
58    openModal (index){
59      this.showContent = true
60      // モーダルセットようのデータ作成
61      this.usersIndex = index
62      // this.usersIndex.forEach((userIndex, index) => { // 修正箇所： idの振り直し
63      //   userIndex.id = index;
64      // })
65      const usersIndex = this.usersIndex
66      // storeに渡す
67      this.$store.dispatch('modalSet', usersIndex)
68    },
69    closeModal (){
70      this.showContent = false
71    },
72  }
73}
74</script>

modal.vue

vue
1<template>
2  <div id="overlay" v-show="showContent">
3    <div id="main-content">
4      <p>{{ $store.getters.modalDatas }}さんの残高</p>
5      <!-- <p>{{ $store.getters.modalDatas.id }}</p> -->
6      <div id="button-content">
7        <p><button v-on:click="closeModal" class="modal-button">close</button></p>
8      </div>
9    </div>
10  </div>
11</template>
12
13<script>
14/* eslint-disable */
15
16export default {
17  // props: {
18  //     index: Number
19  // },
20  data () {
21    return {
22      showContent: false
23    }
24  },
25  methods: {
26    openModal (){
27      this.$emit("open", this.showContent);
28    },
29    closeModal (){
30      this.$emit("close", this.showContent);
31    }
32  }
33}
34</script>
35