vuex-crud-store
Vuex store to handle basic create, read, update, delete operations with server. It maintains a collection of objects fetched from the server and keeps it synchronized when performing CRUD opertations. The store is namespaced and simple to integrate with Vue components. An optional vuex module can be passed in to configure the store. This way, collection store dependencies can be calculated based on the application state.
Vuex store
Vue // Optional vuex module to configure the collection storelet booksStore = state: id_key: 'id' getters: { if !id return 'http://mydomain.com/books' return 'http://mydomain.com/books/' + id } Vuex
Vue component
computed: ... methods: ...
Endpoint format requirements
vuex-crud-store
requires the API to format responses as specified below
POST /collection
Request
{Resource}
Respone
{Created resource}
GET /collection
Response
{
"resources": [{Resource},...]
}
GET /collection/{id}
Response
{Resource}
PUT /collection/{id}
Request
{Resource}
Response
{Updated resource}
DELETE /collection/{id}
Response
{
"status": "success",
"message": "Successfully deleted resource"
}
API Reference
Creates a collection store with a config module
createCollectionStore(configModule)
configModule = {
state: { id_key: int },
getters: {
endpoint: function() { ... }
}
}
Store actions
store.dispatch('collection/create', { resource: Resource })
store.dispatch('collection/read')
store.dispatch('collection/read', {id})
store.dispatch('collection/update', { resource: Resource })
store.dispatch('collection/del', { resource: Resource })