# vuex-crud-store

> Vuex store to handle basic create, read, update, delete operations with server

Latest version **1.0.4** (published 2017-10-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install vuex-crud-store
pnpm add vuex-crud-store
yarn add vuex-crud-store
bun add vuex-crud-store
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2017-10-26 |
| First published | 2017-10-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Marton Kilian |
| Maintainers | mkilian |
| Keywords | vuex, crud, rest, store, vuejs |

## Links

- npm: https://www.npmjs.com/package/vuex-crud-store
- npm.io page: https://npm.io/package/vuex-crud-store

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) ^2.3.2
- [vuex](https://npm.io/package/vuex.md) ^2.3.1
- [es6-promise](https://npm.io/package/es6-promise.md) ^4.1.0
- [isomorphic-fetch](https://npm.io/package/isomorphic-fetch.md) ^2.2.1

## Recent versions

- 1.0.4 (latest) — 2017-10-26
- 1.0.3 — 2017-10-26
- 1.0.2 — 2017-10-25
- 1.0.1 — 2017-10-25
- 1.0.0 — 2017-10-25

## README

# 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
```javascript
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// Optional vuex module to configure the collection store
let booksStore = {
  state: {
    id_key: 'id'
  },
  getters: {
    endpoint: (state, getters, rootState) => (id) => {
      if (!id)
        return 'http://mydomain.com/books'
      return 'http://mydomain.com/books/' + id
    }
  }
}

export default new Vuex.Store({
  modules: {
    books: createCollectionStore(booksStore),
  }
})
```


#### Vue component
```javascript
import { mapState, mapActions, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapState({
      books: state.books.collection
    })
  }
  methods: {
    ...mapActions('books', [
      'create',
      'read',
      'update',
      'del'
    ])
  } 
}
```


#### 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 })
```

---
_Source: https://npm.io/package/vuex-crud-store · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._