@bildvitta/vuex-store-module NPM

vuex-store-module

VuexStoreModule is a generic Vuex store module for keep it simple. Use your time for what you really needs.

Getting Started

Installation

npm i @bildvitta/vuex-store-module

Usage

To use the VuexStoreModule you have to setup the API, you can pass an instance of axios or another API like axios.

import VuexStoreModule from '@bildvitta/vuex-store-module'
import axios from 'axios'

const storeModule = new VuexStoreModule({ apiService: axios })
// you can pass your own API like axios to apiService

export default storeModule

Inside your store let's import our instance of VuexStoreModule.

import storeModule from 'some-path'

export default storeModule.createStoreModule('posts')

Options

const storeModule = new VuexStoreModule({
  apiService: undefined // instance of API
})

storeModule.createModule(
  'resource', // name of store and usually used as endpoint of API
  options: {
    idKey: 'id', // property used for find in object and arrays
    perPage: 12, // results per page

    createURL: '/', // custom URL for create
    destroyURL: ({ id }) => `/${id}`, // custom URL for destroy
    fetchFiltersURL: '/', // custom URL for fechFilters
    fetchFormURL: ({ id }) => `/${id}`, // custom URL for fechForm
    fetchListURL: '/', // custom URL for fechList
    fetchSingleURL: ({ form, id }) => `/${id}`, // custom URL for fechSingle
    replaceURL: ({ id }) => `/${id}`, // custom URL for replace
    updateURL: ({ id }) => `/${id}`, // custom URL for update

    methods: [ // methods that the VuexStoreModule will return
      'CREATE',
      'DESTROY',
      'FETCH_FILTERS',
      'FETCH_FORM',
      'FETCH_LIST',
      'FETCH_SINGLE',
      'REPLACE',
      'UPDATE'
    ]
  }
)

Methods

Name	API Method	Arguments	description
`create`	`POST`	`{ payload, url }`	Creates an object and return it.
`destroy`	`DELETE`	`{ id, params }`	Deletes an object and return it.
`fetchFilters`	`GET`	`{ params, url }`	Returns filters from an endpoint. Used for dynamic filters.
`fetchForm`	`GET`	`{ id, params, url }`	Returns an object from `/new` if no `resource` or `url` is passed
`fetchList`	`GET`	`{ filters = {}, increment, ordering = [], page = 1, limit, search, url }`	Returns a list.
`fetchSingle`	`GET`	`{ form, id, params, url }`	Returns an object.
`replace`	`PUT`	`{ id, payload, url }`	Update fields in an object.
`update`	`PATCH`	`{ id, payload }`	Update all fields in an object.