Vuex-CRUD
Introduction
Vuex-CRUD is a library for Vuex which helps you to build CRUD modules easily.
Installation
yarn add vuex-crud
OR
npm install vuex-crud
Vuex-CRUD uses Array.prototype.includes
, Object.assign
and Promise
. Make sure hat your project use polyfill for those if you want to support older browsers! Look at here: https://babeljs.io/docs/usage/polyfill/ for more info.
Basic Usage
- Create your first CRUD resource:
// src/store/articles ; resource: 'articles';
- Register your CRUD resource in your store:
// src/store/index.js ;; ; Vue; Vuex;
- Use it in your components:
<!-- src/components/Articles --> <template> <main> <article v-for="article in articleList"> <h1>{{ article.title }}</h1> <p>{{ article.content }}</p> </article> </main></template> <script> import { mapGetters, mapActions, mapState } from 'vuex'; export default { name: 'articles', computed: { ...mapGetters('articles', { articleList: 'list' }), ...mapState([ 'route', // vuex-router-sync ]), }, methods: { ...mapActions('articles', { fetchArticles: 'fetchList' }), fetchData() { return this.fetchArticles(); } }, watch: { $route: 'fetchData', }, created() { this.fetchData(); } };</script>
<!-- src/components/Article --> <template> <main> <article v-if="currentArticle"> <h1>{{ currentArticle.title }}</h1> <p>{{ currentArticle.content }}</p> </article> </main></template> <script> import { mapGetters, mapActions, mapState } from 'vuex'; export default { name: 'article', computed: { ...mapGetters('articles', { articleById: 'byId' }), ...mapState([ 'route', // vuex-router-sync ]), currentArticle() { return this.articleById(this.route.params.id); } }, methods: { ...mapActions('articles', { fetchArticle: 'fetchSingle' }), fetchData() { return this.fetchArticle({ id: this.route.params.id }); } }, watch: { $route: 'fetchData', }, created() { this.fetchData(); } };</script>
Advanced Usage
The following options are available when creating new Vuex-CRUD module:
; resource: 'articles' // The name of your CRUD resource (mandatory) idAttribute: 'id' // What should be used as ID urlRoot: '/api/articles' // The url to fetch the resource state: {} // Initial state. It will override state generated by Vuex-CRUD actions: {} // Initial actions It will override actions generated by Vuex-CRUD mutations: {} // Initial mutations. It will override mutations generated by Vuex-CRUD getters: {} // Initial getters. It will override getters generated by Vuex-CRUD client: defaultClient // Axios client that should be used for API request {} // Callback for collection GET start {} // Callback for collection GET success {} // Callback for collection GET error {} // Callback for single GET start {} // Callback for single GET success {} // Callback for single GET error {} // Callback for POST start {} // Callback for POST success {} // Callback for POST error {} // Callback for PATCH start {} // Callback for PATCH success {} // Callback for PATCH error {} // Callback for PUT start {} // Callback for PUT success {} // Callback for PUT error {} // Callback for DELETE start {} // Callback for DELETE success {} // Callback for DELETE error only: 'FETCH_LIST' 'FETCH_SINGLE' 'CREATE' 'UPDATE' 'REPLACE' 'DESTROY' // What CRUD actions should be available res // Method used to parse collection res // Method used to parse single resource res // Method used to parse error;
Nested Resources
Vuex-CRUD is designed mainly for flatten APIs like:
/api/articles/
/api/users/1
/api/pages?byBook=1
but it also supports nested resources like:
/api/books/1/pages/10
/api/users/john/tasks/15
However your store will always be flattened and will look similar to this:
books: entities: '1': // ... pages: entities: '1': // ... '2': // ... '3': // ... list: '1' '2' '3'
There are 2 possible ways to implement provide custom URL:
- Provide custom url for each request:
;;;;;;
- Define a getter for custom url:
; resource: 'pages' { // id will only be available when doing request to single resource, otherwise null // type is the actions you are dispatching: FETCH_LIST, FETCH_SINGLE, CREATE, UPDATE, REPLACE, DESTROY const rootUrl = `/api/books/`; return id ? `rootUrl/` : rootUrl; };
and your requests will look this:
const id = 2;const bookId = 1; ;;;;;;
Custom client
Vuex-CRUD is using axios for API requests. If you want to customize interceptors or something else, then you can do following:
;; defaultClientinterceptorsrequest; ;
Parsing Data from Your API
You can provide a custom methods to parse data from your API:
; ;
Getters
Vuex-CRUD ships with following getters:
list()
returns list of resourcesbyId(id)
returns resource by ID
Actions
Vuex-CRUD ships with following actions (config is configuration for axios):
// GET /api/<resourceName> { // ... } // GET /api/<resourceName>/:id { // ... } // POST /api/<resourceName> { // ... } // PATCH /api/<resouceName>/:id { // ... } // PUT /api/<resouceName>/:id { // ... } // DELETE /api/<resouceName>/:id { // ... }
Usage with Nuxt
vuex-crud
works with Nuxt modules system as well. You can simply define your Nuxt modules as following:
; const crudModule = ; const state = crudModulestate; const actions mutations getters = crudModule; ;
and then use it in your component:
computed: ... { store; };
License
The MIT License (MIT) - See file 'LICENSE' in this project
Copyright
Copyright © 2017 Jiří Chára. All Rights Reserved.