是否有必要在字符串数组和对象展开运算符之间拆分 mapState？

Question

我正在使用 Vuex，我有 2 个状态：

state: {
  token: 'xyz',
  user: {
     id: 1,
     user: 'cody',
     username: 'cody'
     }
}

在组件中，我使用了以下内容：

<template>
<div>
  <button @click="getProfile">
      click to get profile
  </button>
  <p>{{ user.name }}</p>
</div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    name: "Profile",
    computed: {
        ...mapState({
            token: "token",
        }),
        ...mapState(["user"])
    },
    methods: {
        getProfile() {
            fetch("http://localhost:3000/profile", {
                headers: {
                    Authorization: `Bearer ${this.token}`,
                }
            })
        }
    }
}
</script>

在计算部分注意到我使用了 2 个 mapState 而不是一个。

computed: {
        ...mapState({
            token: "token",
        }),
        ...mapState(["user"])
    },

请问是否可以在单个 mapState 声明中一起声明字符串数组和对象展开运算符？因为现在我需要有 2 个 mapState 才能让它工作。所以我想知道当我只使用一个 mapState 时是否遗漏了什么？

Answer 1

因为您没有其他计算属性并且您没有重命名 token 状态，您可以简单地使用

computed: mapState(["token", "user"]),

mapState 助手只接受一个参数，要么是字符串数组，要么是对象，所以不能混合使用数组和对象格式。根据您在下面的评论，您可以这样做...

computed: mapState({
  token: "token",
  user: "user"
})

虽然我真的不明白你为什么会

是否有必要在字符串数组和对象展开运算符之间拆分 mapState？

Is it necessary to split mapState between a string array and object spread operator?

javascript

vue.js

vuex