Axios Vue.js 将对象数组从 store.js 传递给组件

Posted 2023-02-22

【中文标题】Axios Vue.js 将对象数组从 store.js 传递给组件

【英文标题】：Axios Vue.js Pass an array of objects from store.js to component

【发布时间】：2019-07-30 11:46:12

【问题描述】：

我在 Vue.js 上苦苦挣扎，所以我需要你的帮助。

我想做一些太简单的事情但不幸的是没有运气。在 store.js 中，我有一个 axios fetch，它从被调用的 API 返回数据。 我的下一步是在组件中传递对象。

我使用 this.$store.dispatch('loadBeers') 和突变成功地做到了，我可以在我的 html 中呈现这些项目。

但是，如果我想处理 helloworld 组件中的数据，例如进行分页和过滤 obj，该怎么办？我的逻辑告诉我，我需要将 obj 存储在一个新数组中，然后才能处理我的数据。

如何将 this.myBeers 转移到 helloworld 组件？ 也许我的逻辑或我的方法不正确，所以请原谅我只是对实例有经验，但整个框架是另一个世界......

对不起我糟糕的英语，我每天都在努力提高它们。在此先感谢社区..

Store.js

import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";
import VueAxios from "vue-axios";

Vue.use(Vuex);
Vue.use(VueAxios, axios);

export default new Vuex.Store(
  state: 
    beers: []
  ,
  data()
    return
      myBeers:[],
    
  ,
  actions: 
    loadBeers( commit ) 
      axios
        .get("https://api.punkapi.com/v2/beers")
        .then(r => 
          this.myBeers = r.data;
          console.log(this.beers);
          
      )
        .then(beers => 
          commit("SET_BEERS", beers);
        );
    
  ,
  mutations: 
    SET_BEERS(state, beers) 
      state.beers = beers;
    
  
);

<template>
  <div class="container">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="beer in beers" :key="beer.id">
          <td> beer.id </td>
          <td> beer.name </td>
          <td> beer.abv </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import  mapState  from 'vuex'
export default 
  name: 'HelloWorld',
  data()
  return
    myBeers:[],
  
  ,
  mounted () 
    this.$store.dispatch('loadBeers')
    this.myBeers=this.$store.dispatch('loadBeers')
  ,
  computed: mapState([
    'beers'
  ]),
  methods:

    test()
     console.log(this.loadBeers);
    
  



</script>

【参考方案1】：

如果您想根据现有的啤酒列表进行过滤，您可以使用 getter。如果您使用分页，则需要添加到 state.beers 而不是替换它。 https://vuex.vuejs.org/guide/getters.html 在组件中可以用...mapGetters(['myBeer'])查看getter

或者您可以过滤操作中的啤酒并将其添加到state.filteredBeers

import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";
import VueAxios from "vue-axios";

Vue.use(Vuex);
Vue.use(VueAxios, axios);

export default new Vuex.Store(
  state: 
    beers: [],
    filteredBeers: []
  ,

  getters: 
    myBeers(state)
       return.state.beers.filter(beer => beer)
    
  ,
  actions: 
    loadBeers( commit ) 
      axios
        .get("https://api.punkapi.com/v2/beers")
        .then(r => 
          commit("SET_BEERS", r.data);
          let filtered = r.data.filter(beer => beer.ipa)
          commit("SET_FILTERED", filtered)
      )
  
    
  ,
  mutations: 
    SET_BEERS(state, beers) 
      state.beers = beers;
    ,
    SET_FILTERED(state, filtered) 
      state.filteredBeers = filtered;
    
  
);

【参考方案2】：

假设您总是从服务器获取所有数据，然后在客户端进行过滤/分页，您可以在组件中使用计算属性

<script>
import  mapState  from 'vuex'
export default 
  name: 'HelloWorld',
  data()
  return
    filter: 'test',
    curPage: 1,
    pageSize: 10,
  
  ,
  mounted () 
    this.$store.dispatch('loadBeers')
  ,
  computed: 
  ...mapState([
    'beers'
  ]),
      filteredBeers()
      
        const flt = this.filter.toLowerCase();
        return flt ? this.beers.filter(item => item.name.toLowerCase().indexOf(flt) !== -1) : this.beers;
      ,
      paginatedBeers()
      
        return this.filteredBeers.slice((this.curPage - 1) * this.pageSize, (this.curPage - 1) * this.pageSize + this.pageSize - 1);
       
  ,
  methods:

    test()
     console.log(this.paginatedBeers);
    
  



</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
  <div class="container">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="beer in paginatedBeers" :key="beer.id">
          <td> beer.id </td>
          <td> beer.name </td>
          <td> beer.abv </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

【讨论】：

@Igo 非常感谢您抽出宝贵时间，但您的回答给我带来了更多问题。首先，我收到一个错误，this.beers 未定义，这是我的问题，我可以理解您如何过滤数据，但我认为 this.beers 是一个空数组.. this.beers 指的是 mapstate？？

您要提供 JSfiddle 还是 CodePen 吗？

是的，当然！我以前从未使用过它，所以我不能向你保证任何事情，但我会尝试..