

### トランザクションを使い、2つの処理を実行したい

現在、VUE、firestoreを用いて仮想的な投げ銭アプリを作成しています。  
500円持っているログインユーザーが、指定した相手に送金ボタンを押すと、ログインユーザーの持ち金が減り、指定ユーザーの持ち金が増えるシステムを組みたいです。  
トランザクション処理初めて書くので、悪戦苦闘しながら書いていたのですが、うまく実装までたどり着かなかったため、お力添えを頂きたく質問させていただきました。  
初学者のため、コードの記述がおかしいところが多々あるかもしれませんが、ご指摘、アドバイスいただけると幸いです。

### 発生している問題・エラーメッセージ

[code]

    FirebaseError: Function Query.where() called with invalid data. Unsupported field value: undefined
    
[/code]

### 該当のソースコード

[code]

    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state: {
        user: {
          name: '',
          email: '',
          password: '',
          myWallet: '',
          uid: ''
        },
        userData: [],
        inputValue: ''
      },
      getters: {
        email(state) {
          return state.user.email;
        },
        password(state) {
          return state.user.password;
        },
        name(state) {
          return state.user.name;
        },
        myWallet(state) {
          return state.user.myWallet;
        },
        uid(state) {
          return state.user.uid;
        },
        userData(state) {
          return state.userData
        },
        inputValue(state) {
          return state.inputValue
        },
      },
      mutations: {
        
        updateDestinationBalance(state,docs){
          state.uid = docs[0].id
        },
        updateMyBalance(state){
          state.user.myWallet = Number
        }
       
      },
      actions: {
        async closeModal2({ state,commit }, inputValue) {
          const db = firebase.firestore();
          const isMyUid = firebase.auth().currentUser.uid
          try {
            const receiverDocs = await db.collection('userData').where('uid', '==', state.uid).get()
            const receiverId = receiverDocs.docs[0].id
            const senderDocs = await db.collection('userData').where('uid', '==', isMyUid).get()
            const senderId = senderDocs.docs[0].id
            await db.runTransaction(async t => {
              //送金される側
              await t.update(db.collection('userData').doc(receiverId), {
                myWallet: firebase.firestore.FieldValue.increment(Number(inputValue))
              })
              commit('updateDestinationBalance', inputValue)
              //送金する側
              await t.update(db.collection('userData').doc(senderId), {
                myWallet: firebase.firestore.FieldValue.increment(-Number(inputValue))
              })
              commit('updateMyBalance', inputValue)
            })
          } catch (error) {
            console.log(error)
          }
        }
      },
     
    })
    
    
[/code]

[code]

    <template>
      <div class="overlay" v-show="showContent2">
        <div class="main-content">
          <p>あなたの残高 {{ val.myWallet }}</p>
          <p>送る金額</p>
          <input v-model="inputValue" type="number" />
    
          <div class="button-content">
            <p>
              <button @click="closeModal2" class="modal-button">送信</button>
            </p>
          </div>
        </div>
      </div>
    </template>
    
    
    
    <script>
    export default {
      props: {
        val: {
          type: null,
        },
      },
      data() {
        return {
          showContent2: false,
          userData: [],
          inputValue:'',
        };
      },
      methods: {
        openModal2() {
          this.$emit("open", this.showContent2);
        },
        closeModal2() {
          this.$emit("close", this.showContent2);
          this.$store.dispatch("closeModal2", {
            inputValue:this.inputValue
        });
        },
      },
     
      
    };
    </script>
    
    
[/code]

どのようにコード書き換えればいいか、ご教授いただきたいです。  
よろしくお願いいたします。


CC BY-SA 4.0
2021-09-08T03:29:52.777
82333
2021-09-08T03:31:24.483
2021-09-08T03:31:24.483
4236
47933
question
vue.js firebase
トランザクションによる処理について