Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vueonrails/vuex-rails-plugin
A Vuex plugin that easily maps Rails resources to Vuex modules
https://github.com/vueonrails/vuex-rails-plugin
Last synced: about 1 month ago
JSON representation
A Vuex plugin that easily maps Rails resources to Vuex modules
- Host: GitHub
- URL: https://github.com/vueonrails/vuex-rails-plugin
- Owner: vueonrails
- License: mit
- Created: 2018-06-06T02:16:40.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-02-12T07:57:07.000Z (almost 3 years ago)
- Last Synced: 2023-03-02T01:35:38.001Z (almost 2 years ago)
- Language: JavaScript
- Size: 9.77 KB
- Stars: 22
- Watchers: 5
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# VuexRailsPlugin
### A Vuex plugin that easily maps Rails resources to Vuex modules
The idea of this plugin is to easily incorporate conventional rest endpoints defined when scaffolding Rails resources and map the responses to appropriate state in Vuex. ex. `resources :posts` generates the following endpoints:
* GET|POST /posts
* GET|PUT /posts/:id
* DELETE /posts/:id
### Install
```bash
$ npm i vuex-rails-plugin
```
### Usage
The plugin can be imported into any Vuex store like so:
```js
// store.js
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
import VuexRailsPlugin from 'vuex-rails-plugin/src/VuexRailsPlugin'
export default new Vuex.Store({
// ...
plugins: [
VuexRailsPlugin('posts'),
VuexRailsPlugin('categories')
]
})
```
This example defines Vuex modules for 'posts' and 'categories' namespaces.
It supports the following state:
* all - items returned from the index action
* current - set when the show action is called
* error - set if any errors occur such as validations
The state can be mapped to any Vue component using `mapState`
```js
// some-component.vue
import { mapState } from 'vuex'
export default {
computed: {
...mapState('posts', {
posts: state => state.all,
currentPost: state => state.current
error: state => state.error
})
}
}
```
Actions can also be called by using `mapActions`
```js
// some-component.vue
import { mapActions } from 'vuex'
export default {
// ...
methods: {
...mapActions('posts', {
getPosts: 'getAll', // ex. this.getAll()
getPost: 'get', // ex. this.getPost(id)
createPost: 'create', // ex. this.createPost({title: 'Bad', body: 'Ass'})
updatePost: 'update', // ex. this.updatePost({id: 1, title: 'Bad', body: 'Mama Jama'})
destroyPost: 'destroy' // ex. this.destroyPost({})
})
}
}
```
Params are supported
```js
this.getPosts({page: 1, limit: 10})
```
Use directly in a form
```js
export default {
data() {
return {
newPost: {
title: '',
body: ''
}
}
}
}
```
```html
Title
Body
Submit
```
Promises supported
```js
export default {
// ...
methods: {
promiseMeThisPostWillCreate() {
this.createPost(this.newPost)
.then(createdPost => {
alert('Thanks for keeping your promise!')
})
.catch(err => {
alert('Why did you break my promise?')
})
}
}
}
```
### TODO
* Support nested resources ex. `/categories/:category_id/posts`
* Support other options that may be necessary to support custom getters, filters, etc.