Nine Project Managers

    vuex-async-module
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.14 • Public • Published

    vuex-async-module

    NPM version Coveralls github Build Status Standard Version Maintainability Test Coverage

    What is this about ??

    • The idea and mainly code in this project have come from this article by @lachlanmiller_52885.
    • Shortly it's about how to reduce vuex boilerplate with "call — pending — success — failure pattern".
    • Each module provide each state of vuex as a API including data, status of request and some hook function to customize your state.
    • For more information take a look at our example.

    Dependencies

    • vue
    • vuex
    • axios

    Installation

    Install via npm

    npm install vuex-async-module

    Install via yarn

    yarn add vuex-async-module

    Usage

    createVuexAsyncModule

    Create vuex store by using our "createVuexAsyncModule" function.
    When vuex store was created you don't need to know or write anything inside vuex, But all you need to know is about all functions we provided for you to get the job done easily.

    import Vue from 'vue'
    import Vuex from 'vuex'
    import { createVuexAsyncModule } from 'vuex-async-module'
     
    Vue.use(Vuex)
     
    export const store = new Vuex.Store({
      modules: {
        Info: {
          ...createVuexAsyncModule('info')
        }
      }
    })

    State

    This is module state created by createVuexAsyncModule

      state: {
          data: null, // data from AJAX call, You can customize this by using beforeSave callback (look at next section)
          pending: false, // loading status (true = loading, false = done)
          statusCode: 0, // response status code
      },

    mapGetters

    One getter available for each module and it represent a state itself.
    The name of getter is module name then follow by "State" for example module "info" and getter will be "infoState"

    <template>
      <h1>{{infoState.something}}</h1>
    </template>
     
    <script>
    import {mapGetters} from 'vuex'
     
    export default {
      computed: {
        ...mapGetters(['infoState'])
      }
    }
    </script>

    mapActions

    One action available for each module and it can be customize for any endpoint you need.
    The name of action is "request" follow by module name then "Async" for example module "info" and action will be "requestInfoAsync"
    Once you call action with provided endpoint the function will save reponsed data on state immediately.
    Note that axiosConfig is the same config from axios libary itself.

    <script>
    import {mapActions} from 'vuex'
     
    export default {
      methods: {
        ...mapActions(['requestInfoAsync']),
        getInfo () {
          // after this called all response data will be saved as module state automaticly.
          this.requestInfoAsync({
            axiosConfig: {
              url: '//jsonbin.io/b/5a01dc7471fdfc4fe9d09cdb'
            }
          })
        }
      }
    }
    </script>
    • Customize data before it save to module state.
    <script>
    import {mapActions} from 'vuex'
     
    export default {
      methods: {
        ...mapActions(['requestInfoAsync']),
        getInfo () {
          this.requestInfoAsync({
            axiosConfig: {
              url: '//jsonbin.io/b/5a01dc7471fdfc4fe9d09cdb'
            },
            beforeSave: (data, state) => {
              // data = reponse data when our request already success
              // state = last data state
     
              // filter then return to save in module state (last state will be gone by this)
              return data.map(item => item.name)
            }
          })
        }
      }
    }
    </script>
    • Handle action with promise using then, catch
    <script>
    import {mapActions} from 'vuex'
     
    export default {
      methods: {
        ...mapActions(['requestInfoAsync']),
        getInfo () {
          this.requestInfoAsync({
            axiosConfig: {
              url: '//jsonbin.io/b/5a01dc7471fdfc4fe9d09cdb'
            }
          }).then(res => {
            console.log(res)
          }).catch(err => {
            console.log(err)
          })
        }
      }
    }
    </script>
    • Handle action with promise using await [2]
    <script>
    import {mapActions} from 'vuex'
     
    export default {
      methods: {
        ...mapActions(['requestInfoAsync']),
        getInfo () {
          try {
            await this.requestInfoAsync({
              axiosConfig: {
                url: '//jsonbin.io/b/5a01dc7471fdfc4fe9d09cdb'
              }
            })
          } catch (e) {
            console.log(e)
          }
        }
      }
    }
    </script>
    • Handle action with callback
    <script>
    import {mapActions} from 'vuex'
     
    export default {
      methods: {
        ...mapActions(['requestInfoAsync']),
        getInfo () {
          this.requestInfoAsync({
            axiosConfig: {
              url: '//jsonbin.io/b/5a01dc7471fdfc4fe9d09cdb'
            },
            onSuccess: (res) => {
              console.log(res)
            },
            onError: (err) => {
              console.log(err)
            }
          })
        }
      }
    }
    </script>

    mapGetters

    When data from AJAX call saved to state then you can map getter to sync your data to the template.
    One getter available for each module and it represent a state itself.
    The name of getter is module name then follow by "State" for example module "info" and getter will be "infoState"

    <template>
      <div v-if="infoState.pending === false">
        <h1>{{infoState.data.something}}</h1>
      </div>
      <div v-else>
        Loading...
      </div>
    </template>
     
    import {mapGetters} from 'vuex'
     
    export default {
      computed: {
        ...mapGetters(['infoState'])
      }
    }

    Example

    We provided a lot of way using our libary including.

    • Create vuex store (easiest way) [Click]
    • Create vuex store by grouping module (by code **Compiled as one module) [Click]
    • Create vuex store by grouping module (by module **Compiled as seperated modules) [Click]
    • How to handle action using promise and callback [Click]

    Unit Test [For Contributors]

    If you clone this repo and did some changes do not forget to update the test file then..

    Test via npm

    npm run test

    Test via yarn

    yarn test

    Install

    npm i vuex-async-module

    DownloadsWeekly Downloads

    1

    Version

    0.0.14

    License

    MIT

    Last publish

    Collaborators

    • sellsuki