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

Question

我在Vue.js方面苦苦挣扎，所以希望得到您的帮助。

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

我成功地使用了this。$ store.dispatch（'loadBeers'）和mutation，并且可以在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> 

Answer 1

如果要基于现有啤酒清单进行过滤，可以使用吸气剂。 如果您使用分页，则需要添加到state.beers 。 https://vuex.vuejs.org/guide/getters.html在组件中，您可以使用...mapGetters(['myBeer'])查看吸气剂

或者您可以在操作中过滤啤酒并将其添加到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; } } }); 

Answer 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>