Notify President Madagascar

    ajax-store

    1.0.6 • Public • Published

    AJAX Vuex Store

    npm

    Authors:

    Overview

    A namespaced Vuex store module that makes use of AJAX to get and update the store's data from the given API end-point.

    Usage

    To use the AJAX Vuex store in your application, start by extending the AjaxStore class from your own store class, such as below:

    import { AjaxStore } from 'ajax-store'
     
    class ExampleStore extends AjaxStore {
        constructor() {
            super({
                action: 'https://example.com',
                method: 'GET', // Default
            })
        }
    }
     
    export default ExampleStore

    You can specify the AJAX request 'action' and 'method' when calling the parent class' constructor.

    Import your newly created namespaced store module into your Vuex store, for example:

    import Vue from 'vue'
    import Vuex from 'vuex'
     
    import ExampleStore from './ExampleStore'
     
    Vue.use(Vuex)
     
    const VuexStore = new Vuex.Store({
        modules: {
            example: new ExampleStore(),
        },
    })
     
    export default VuexStore

    To get data from the namespaced Vuex store (or to update it) in your Vue component, you can make use of the Vuex mapGetters and mapActions helper methods. Below is an example implementation of a Vue component that checks if the namespaced Vuex store contains any items during the created lifecycle hook. If the store contains no items, then the updateItems action is dispatched to get the items from the given API end-point specified in your namespaced store module using AJAX.

    import { mapGetters, mapActions } from 'vuex'
     
    created() {
        if (!this.hasItems) this.updateItems()
    },
     
    computed: {
        ...mapGetters('example', [
            'items',
            'hasItems',
        ]),
    },
     
    methods: {
        ...mapActions('example', [
            'updateItems',
        ]),
    },

    PusherAgent for Laravel Echo with Pusher

    The agent will listen for any updates from the api and commit them into the current state to ensure all connected clients are in-sync and remove the need for regular ajax calls to fetch the latest data.

    IMPORTANT: The agent will automatically listen to private pusher channels with the same name as the Vuex Store Module defined earlier. In this case example (private-example). This should also match the name of your Laravel Model class.

    When creating your root Vue instance, add the PusherAgent plugin and mixin.

    import Vue from 'vue'
    import { PusherAgent } from 'ajax-store'
     
    Vue.use(PusherAgent.plugin, {
        key: 'your pusher key',
        cluster: 'eu',
        encrypted: true,
    })
     
    new Vue({
        el: '#app',
        template: '<App/>',
        components: {
            App,
        },
        mixins: [
            PusherAgent.mixin,
        ]
    })

    Gotchas

    The BroadcastsPusherEvents trait will set the wasRecentlyCreated property of a model to false after the first saved event hook. This means that a new model can be instanciated with create() which fires a save event and any further saves on the model will be treated as an update. This is useful when associating many-to-many relations with the model which require the model to be present in the database.

    Keywords

    none

    Install

    npm i ajax-store

    DownloadsWeekly Downloads

    1

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    59.1 kB

    Total Files

    4

    Last publish

    Collaborators

    • dewsign