Vue JS - Getter 返回对象而不是商店中的实际值

【问题标题】：Vue JS - Getters return the object instead the actual value in the storeVue JS - Getter 返回对象而不是商店中的实际值
【发布时间】：2020-06-11 00:35:02
【问题描述】：

我无法使用 getter 在我的商店中获取客户“爸爸”。但是，它会在屏幕上显示像 [ "dad" ] 这样的对象。我该怎么纠正这个？我是 vue.js 的新手

<template>
          <div class="hello">
        <p>{{ GET_CUSTOMERS }}</p>
        </div>
        </template>
    <script>
    import { mapGetters } from 'vuex'
    export default  {
    computed:{
      ...mapGetters([
      'GET_CUSTOMERS'
      ])
    }
    </script>

我的店铺

state: {
            customers: ['dad']
        ],
getters: {
GET_CUSTOMERS(state){
                return state.customers;
            }
}

【问题讨论】：

标签： javascript vue.js state vuex getter

【解决方案1】：

您的customers 数据是一个数组。当您直接在 {{ ['dad'] }} 这样的模板中渲染数组时，Vue 会将其在 DOM 中渲染为 [ "dad" ]。

我认为您只想呈现一位客户？你可以像这样渲染第一个客户：

{{ GET_CUSTOMERS[0] }}

要呈现每个客户，您需要使用 v-for 循环遍历每个客户：

<ul>
  <li v-for="(customer, i) of GET_CUSTOMERS" :key="i">
    {{ customer }}
  </li>
</ul>

或者，如果您愿意，您可以将每个客户连接成一个字符串，每个客户用逗号分隔：

{{ GET_CUSTOMERS.join(', ') }}

【讨论】：