使用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

使用canmapGetters，您可以将商店中的users映射到计算的。这将是被动的。

因此，您甚至不需要加载用户。

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

Answer 2

如果可以使用mapState，请在computed而不是data中声明userList：

computed: {
...mapState({
userList: state => state.users.map(user => user.userName),
})

在您的html代码中，将所有user.userName更改为user