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

Question

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

用户信息由 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>

你想达到什么

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

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

标签： vue.jsvuexstore

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>