Бесконечная загрузка на Vue.js?

Question

[100R]

Использую готовый Vue Plugin для реализации бесконечной загрузки. По примеру из документации все работает отлично, но как его использовать внутри модуля? В зависимости от результата нужно выполнить $state.loaded() или $state.complete() и как бы я не пытался сделать это внутри экшена - результат отрицательный.

ProductList.vue

<template>
    <div>
        <div v-for="product in products" :key="product.id">
            <img :src="product.image">
        </div>
        <infinite-loading @infinite="getProducts"></infinite-loading>
    </div>
</template>

<script>
    import InfiniteLoading from 'vue-infinite-loading';
    import { mapState, mapActions } from 'vuex'

    export default {
        components: {
            InfiniteLoading
        },
        computed: mapState({
            products: state => state.products.all
        }),
        methods: mapActions('products', [
            'getProducts'
        ])
    }
</script>

products.js

// initial state
const state = {
    page: 1,
    all: []
}

// getters
const getters = {}

// actions
const actions = {
    getProducts ({ commit }) {
        axios.get('/api/products', {
            params: {
              page: state.page,
            },
        }).then(({ data }) => {
            if (data.data.length) {
                // $state.loaded();
            } else {
                // $state.complete();
            }
        });
    }
}

// mutations
const mutations = {
    setProducts (state, products) {
        state.all = products
    },
}

export default {
    namespaced: true,
    state,
    getters,
    actions,
    mutations
}

Answer 1

[Даниил Братухин]

А передавать аргумент в функцию кто будет? :)

const actions = {
  getProducts({ commit }, $state) {
    // blah
    $state.loaded()
  }
}