javascript - 使用 vuex mapGetters 迭代用户的状态 obj

Question

我现在正在学习 vuex，但我陷入了映射功能，例如 import { mapGetters } from 'vuex';
在我的状态下，我有一个名为 users 的对象，我在其中保存用户数据，稍后将添加 addNewUser 功能来扩展用户对象。但对于这个测试用例，我刚刚创建了一个名为“John”的虚拟用户:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    users: [
      {
        userName: 'John',
        income: 2000,
        leftover: 0
      }
    ]
  },
  getters: {
    user: state => {
      return state.users;
    },
  },
  mutations: {},
  actions: {
    addNewUser(userName, income) {
      console.log(userName, income, 'from vuex');

    }
  },
  modules: {}
});

在我这样做之前，我简单地使用 this.$store.state.users 调用 john，然后使用 forEach 迭代 userNames。但发现这不是最好的方法。

我怎样才能获取用户的状态数据，并像以前一样在 forEach 循环中将它们打印出来？

在第 129 行 loadAllUsers() 中，您可以看到我实现此目的的旧方法:

<template>
  <div
    id="user-modal"
    class="modal fade"
    tabindex="-1"
    role="dialog"
    aria-hidden="true"
  >
    <div
      class="modal-dialog modal-dialog-centered"
      role="document"
    >
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">
            Settings
          </h5>
          <button
            type="button"
            class="close"
            data-dismiss="modal"
            aria-label="Close"
          >
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <!-- List all Users -->
          <div
            id="users-list"
            class="mb-3"
          >
            <h5>Users:</h5>
            <ul class="list-group">
              <li
                v-for="user in userList"
                :key="user.userName"
                class="list-group-item"
              >
                {{ user.userName }}
              </li>
            </ul>
          </div>

          <!-- Add New Users -->
          <h5>Add New User:</h5>
          <div class="input-group mb-1">
            <div class="input-group-prepend">
              <span
                id="basic-addon1"
                class="input-group-text"
              >
                <i class="fas fa-user" />
              </span>
            </div>
            <input
              v-model="userNameInput"
              type="text"
              class="form-control"
              placeholder="Username"
            >
          </div>

          <div class="input-group">
            <div class="input-group-prepend">
              <span
                id="basic-addon1"
                class="input-group-text"
              >
                <i class="far fa-money-bill-alt" />
              </span>
            </div>
            <input
              v-model="userIncomeInput"
              type="number"
              class="form-control"
              placeholder="Income"
            >
          </div>
        </div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn-secondary"
            data-dismiss="modal"
          >
            Close
          </button>
          <button
            type="button"
            class="btn btn-primary"
            @click="createNewUser"
          >
            Save changes
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
// import { mapActions } from 'vuex';
export default {
  data() {
    return {
      userNameInput: '',
      userIncomeInput: '',
      userList: []
    };
  },
  computed: {
    ...mapGetters(['user']),
    printUserTest(user) {
      return user;
    }
  },
  created: function() {
    this.loadAllUsers();
  },
  methods: {
    // ...mapActions({
    //   addNewUser: 'addNewUser'
    // }),
    loadAllUsers() {
      let allUsers = this.$store.state.users;
      allUsers.forEach(user => {
        this.userList.push({ userName: user.userName });
      });
      // },
      // createNewUser() {
      //   let userName = this.userNameInput;
      //   let userIncome = this.userIncomeInput;
      //   console.log(userName, userIncome);
      // }
    }
  }
};
</script>

<style lang="scss">
#user-modal {
  color: $black;
  .input-group-text {
    width: 46px;
  }
}
</style>

Answer 1

通过 mapGetters，您可以将商店中的用户映射到计算用户。这将是 react 性的。

所以您甚至不需要加载用户。

Vue.config.devtools = false;
Vue.config.productionTip = false;

const store = new Vuex.Store({
  state: {
    users: [{
      userName: 'John',
      income: 2000,
      leftover: 0
    }]
  },
  getters: {
    users: state => {
      return state.users;
    },
  }
})


var app = new Vue({
  el: '#app',
  store,
  computed: {
    ...Vuex.mapGetters(["users"]),
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vuex@3.1.2/dist/vuex.js"></script>

<div id="app">
  <div v-for="user in users">
    {{ user.userName }}
  </div>
</div>

<div>

https://vuex.vuejs.org/guide/getters.html#getters