Axios Vue.js Передача массива объектов из store.js в компонент - PullRequest
Новая
       16

Axios Vue.js Передача массива объектов из store.js в компонент

1 голос
/ 08 марта 2019

Я борюсь с Vue.js, поэтому мне нужна ваша помощь.

Я хочу сделать что-то слишком простое, но, к сожалению, без удачи.В store.js у меня есть выборка axios, которая возвращает данные из вызываемого API.Мой следующий шаг - передать объект в компонент.

Мне удалось это сделать с помощью этого. $ Store.dispatch ('loadBeers') и мутации, и я могу отобразить элементы в моем html.

НО, что если я захочу обработать данныев компоненте helloworld, например, чтобы сделать нумерацию страниц и отфильтровать объект?Моя логика говорит мне, что мне нужно сохранить объект в новом массиве, и после того, как я смогу обработать свои данные.

Как я могу перенести 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>

Ответы [ 2 ]

2 голосов
/ 08 марта 2019

Предполагая, что вы всегда получаете все данные с сервера, а затем выполняете фильтрацию / разбиение на страницы на стороне клиента, вы можете использовать вычисляемые свойства внутри вашего компонента 

<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>
2 голосов
/ 08 марта 2019

Если вы хотите фильтровать на основе существующего списка пива, вы можете использовать геттер.Если вы используете нумерацию страниц, вам нужно добавить к 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;
    }
  }
});
...