A vuex plugin to sync vuex store with jsdata-store
npm install vuex-plugin-jsdataRead more : https://github.com/js-data/js-data/issues/57
vuex@2.0.x
js-data@2.9.x
`You're welcome to contribute to help compatibility issues.
Usage
With NPM
`npm install vuex-plugin-jsdata`Then when you setup vuex:
`
import jsdataPlugin from 'vuex-plugin-jsdata'
import yourJsDataStore from 'xxxx'const plugins = [
jsdataPlugin(yourJsDataStore),
... // other plugins
]
new Vuex.Store({
// state,
// actions,
// mutations,
plugins,
})
`
How does it work ?
Every change in a js-data ressource are made with the DSInject method.
The plugin manage the state tree(vuex) under a DS module by listening to the afterInject hook (js-data)mutation
vuex-plugin-jsdata fire only one silent mutation :
REFRESH_DATASTOREgetters
Although all local ressources injected in the jsdata-store can be found in the vuex store under the namespaced module DS, the plugin provide automatic getters for every model.Ex:
`
// Register a model in js-dataexport const User = store.defineResource({
name: 'user',
endpoint: 'users',
})
`
`
// in a .vue component
div.user
pre {{ user | json }}
`
global helper
This plugin provide a handy way to make a ressource available inside components.
$3
mapRessources([
{ nameOfTheGetter: [nameOfTheRessource:string, id_key:string]},
...
])
mapRessources is a getter factory designed to get a single record which id is computed from $vm[id_key].
Its really useful for getting specific records dynamicly (eg: get user with id picked from router params)
example:
`
// in store - DSUsers: { 1: { name: 'Alex' } }
// component definition
// using the object spread operator
$vm = {
data() {
return {
user_id: 1
}
},
computed: {
...mapRessources([
{ user: ['User', 'user_id'] }
{ userFromRoute: ['User', '$route.params.id'] } // with vue-router
]),
}
}
// Log
$vm.user.name -> 'Alex'
$vm.userFromRoute.name -> 'Alex'
`Example
Clone the repo and run
`
npm install
npm run example-simple
=> go to /examples/simple
``more to come ...