Vuex-CRUD is a library for Vuex which helps you to build CRUD modules easily.
yarn add vuex-crud
Or if you are old-school:
npm install vuex-crud
- Create your first CRUD resource:
// src/store/articles
import createCrudModule from 'vuex-crud';
export default createCrudModule({
resource: 'articles'
});- Register your CRUD resource in your store:
// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import articles from '@/store/articles';
Vue.use(Vuex);
export default new Vuex.Store({
state: {},
modules: {
articles
}
});- 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>The following options are available when creating new Vuex-CRUD module:
import createCrudModule, { defaultClient } from 'vuex-crud';
export default createCrudModule({
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
onFetchListStart: () => {}, // Callback for collection GET start
onFetchListSuccess: () => {}, // Callback for collection GET success
onFetchListError: () => {}, // Callback for collection GET error
onFetchSingleStart: () => {}, // Callback for single GET start
onFetchSingleSuccess: () => {}, // Callback for single GET success
onFetchSingleError: () => {}, // Callback for single GET error
onCreateStart: () => {}, // Callback for POST start
onCreateSuccess: () => {}, // Callback for POST success
onCreateError: () => {}, // Callback for POST error
onUpdateStart: () => {}, // Callback for PATCH start
onUpdateSuccess: () => {}, // Callback for PATCH success
onUpdateError: () => {}, // Callback for PATCH error
onReplaceStart: () => {}, // Callback for PUT start
onReplaceSuccess: () => {}, // Callback for PUT success
onReplaceError: () => {}, // Callback for PUT error
onDestroyStart: () => {}, // Callback for DELETE start
onDestroySuccess: () => {}, // Callback for DELETE success
onDestroyError: () => {}, // Callback for DELETE error
only: [
'FETCH_LIST',
'FETCH_SINGLE',
'CREATE',
'UPDATE',
'REPLACE',
'DESTROY'
], // What CRUD actions should be available
parseList: res => res, // Method used to parse collection
parseSingle: res => res, // Method used to parse single resource
parseError: res => res // Method used to parse error
});Vuex-CRUD is using axios for API request. The client is configurable, so you can add interceptors and so on:
import createCrudModule, { defaultClient } from 'vuex-crud';
import authInterceptor from './authInterceptor';
defaultClient.interceptors.request.use(authInterceptor);
createCrudModule({
resource: 'comments',
client: defaultClient
});You can provide a custom methods to parse data from your API:
import createCrudModule, { defaultClient } from 'vuex-crud';
createCrudModule({
resource: 'articles',
parseList(response) {
const { data } = response;
return Object.assign({}, response, {
data: data.result // expecting array of objects with IDs
});
},
parseSingle(response) {
const { data } = response;
return Object.assign({}, response, {
data: data.result // expecting object with ID
});
}
});Vuex-CRUD ships with following getters:
list()returns list of resourcesbyId(id)returns resource by ID
Vuex-CRUD ships with following actions (config is configuration for axios):
{
// GET /api/<resourceName>
fetchList({ commit }, { config } = {}) {
// ...
},
// GET /api/<resourceName>/:id
fetchSingle({ commit }, { id, config } = {}) {
// ...
},
// POST /api/<resourceName>
create({ commit }, { data, config } = {}) {
// ...
},
// PATCH /api/<resouceName>/:id
update({ commit }, { id, data, config } = {}) {
// ...
},
// PUT /api/<resouceName>/:id
replace({ commit }, { id, data, config } = {}) {
// ...
},
// DELETE /api/<resouceName>/:id
destroy({ commit }, { id, config } = {}) {
// ...
},
}The MIT License (MIT) - See file 'LICENSE' in this project
Copyright © 2017 Jiří Chára. All Rights Reserved.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent