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>