我想显示存储在 store.js 文件中的状态数组中的任意值

Question

用户信息由 store.js 文件的状态管理。

const store = createStore({
  state() {
    return {
      users:[
        {id: 0, userName: 'test1', wallet: 500},
        {id: 1, userName: 'test2', wallet: 1000},
        {id: 2, userName: 'test3', wallet: 1500},
        {id: 3, userName: 'test4', wallet: 2000},
      ],
      userName: '',
      updateUserName: '',
      userLoginInfomation: '',
      errorMessage: ''
    };
  },

当您按下按钮查看钱包时，会显示一个模式。

↓点击查看钱包时出现的模态

    <div class="overlay" v-show="showContent" @click="closeModal">
      <transition name="modal">
        <div v-show="showContent" class="content">
          <p>{{ viewUsers[1].userName }} balance</p>
          <p>{{ viewUsers[1].wallet }}yen</p>
          <p>
            <button class="close-button" @click="closeModal">Close</button>
          </p>
        </div>
      </transition>
    </div>

↓点击发送时出现的模态

<div class="overlay" v-show="showContent2" @click="closeModal">
      <div class="content">
        <p> Your balance：500yen</p>
        <p>Amount to send</p>
        <input type="text" class />
        <p>
          <button class="close-button" @click="closeModal2">Close</button>
        </p>
      </div>
    </div>

What you want to achieve

(1)点击查看钱包按钮时，想从store.js文件中的state.users中获取与点击的索引号相同的用户名并显示模态地。

(2) 当您点击发送按钮时，在显示的模态输入中输入要发送的金额。我想将输入的金额添加到store.js文件的state.users数据的钱包中，该文件具有与单击按钮相同的序列号。

Answer 1

这是未经测试的，但应该可以帮助您找到正确的方向：

<template>
  <ul>
    <li v-for="user in users" :key="user.id" @click="selectUser(user)">
      {{ user.userName }} | {{ user.wallet }}
    </li>
  </ul>

  <div class="modal" v-if="showModal">
    <!-- 
    here you can now access whatever user properties
    you want via the selectedUser property
    -->

    <p>Name: {{ selectedUser.userName }}</p>
    <p>ID: {{ selectedUser.id }}</p>
    <p>Wallet: {{ selectedUser.wallet }}</p>
  </div>
</template>

<script>
  data: () => ({
    selectedUser: null
  }),

  computed: {
    users() {
      return this.$store.users;
    }
  },

  methods: {
    selectUser(user) {
      this.selectedUser = user;
      this.showModal = true;
    }
  },
</script>

我想显示存储在 store.js 文件中的状态数组中的任意值

I want to display an arbitrary value from the state array stored in the store.js file

store

vue.js

vuex