在 vuex 中使用 getter 显示数据的问题答案

【问题标题】：problem showing data using getters in vuex在 vuex 中使用 getter 显示数据的问题
【发布时间】：2020-03-28 17:15:15
【问题描述】：

我正在使用带有 vue cli 的 vuex。我正在从数据库中获取数据，并且正在尝试使用 getter 过滤掉特定数据。我在数组上使用过滤器方法，当我返回数据并尝试在 html 中显示它时，它会显示完整的数组，当我使用 console.log 时，它会显示正确的信息

import axios from "axios";

export default {
  namespaced: true,
  state: {
    customerData: []
  },
  actions: {
    fetchData: ({ commit }) => {
      return axios
        .get("/customer")
        .then(({ data }) => {
          const { customers } = data;
          commit("loadData", customers);
        })
        .catch(error => console.log(error, "error"));
    }
  },
  mutations: {
    loadData: (state, projects) => {
      state.customerData = projects;
    }
  },
  getters: {
    getDate: state => {
      return state.customerData.filter(data => {
        return data.date
      });
    }
  }
};

像这样从 getDate 返回数据会将整个数组返回到屏幕。

getters: {
    getDate: state => {
      return state.customerData.filter(data => {
        return console.log(data.date)
      });
    }
  }

这样记录数据的控制台将显示我想要的正确数据。我不确定我做错了什么。我基本上从 vuex 文档中复制了代码，但它不起作用

<template>
  <div class="hello">
    <div v-for="item in customerData" :key="item.id">
      <p>{{ item.first_name }} {{ item.last_name }}</p>
    </div>
    <h1>{{getDate}}</h1>
  </div>
</template>

<script>
import { mapActions, mapState, mapGetters } from "vuex";

export default {
  name: "HelloWorld",
  mounted() {
    this.fetchData();
  },
  computed: {
    ...mapState("data", ["customerData"]),
    ...mapGetters("data", ["getDate"])
  },
  methods: {
    ...mapActions("data", ["fetchData"])
  }
};
</script>

【问题讨论】：

您是否尝试只返回有日期的用户并删除没有日期或空日期的用户？否则你在地图之后。
我所有的用户都会有一个约会。我正在尝试过滤掉数据库中的每个日期并在有意义的情况下返回该数据
so 过滤器用于很好地...过滤掉对象。但是你如何使用它没有意义。假设您只想获取日期在 1 年前以下的客户数据。将其更改为地图

标签： javascript arrays vue.js vuex

【解决方案1】：

在您的组件中，有 2 个计算道具：

customerData。这是由您的代码中的...mapState("data", ["customerData"]) 定义的。它存储了整个客户列表
getDate。这是由...mapGetters("data", ["getDate"]) 定义的。此计算属性存储过滤后的用户列表。

在您的 HTML 中，您在 customerData 上运行一个循环，它会显示整个列表：

<div v-for="item in customerData" :key="item.id">

相反，您需要像这样在getDate 上运行循环：

<div v-for="item in getDate" :key="item.id">

更改此设置后，您将看到已过滤用户的列表。

旁注：请考虑将 getter 名称更改为 filteredCustomerData 而不是 getDate。

【讨论】：