diff --git a/README.md b/README.md index ad7c6eb..c70f8dd 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # vuex-jsdata-plugin A simple attempt to help using jsdata alongside Vue.js: This plugin syncing Vuex store with js-data -After each injection made by js-data some silent mutations are triggered to ensure vuex store is kept in sync with your ressources (and trigger reactivity). +After each injection made by js-data some silent mutations are triggered to ensure vuex store is kept in sync with your resources (and trigger reactivity). Read more : https://github.com/js-data/js-data/issues/57 @@ -37,7 +37,7 @@ new Vuex.Store({ ``` # How does it work ? -Every change in a js-data ressource are made with the DSInject method. +Every change in a js-data resource 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 @@ -45,7 +45,7 @@ vuex-plugin-jsdata fire only one silent mutation : ``REFRESH_DATASTORE`` ## getters -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. +Although all local resources 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: ``` @@ -82,13 +82,13 @@ export const User = store.defineResource({ ``` ## global helper -This plugin provide a handy way to make a ressource available inside components. -### mapRessources -mapRessources([ - { nameOfTheGetter: [nameOfTheRessource:string, id_key:string]}, +This plugin provide a handy way to make a resource available inside components. +### mapResources +mapResources([ + { nameOfTheGetter: [nameOfTheResource:string, id_key:string]}, ... ]) -mapRessources is a getter factory designed to get a single record which id is computed from $vm[id_key]. +mapResources 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: ``` @@ -102,7 +102,7 @@ $vm = { } }, computed: { - ...mapRessources([ + ...mapResources([ { user: ['User', 'user_id'] } { userFromRoute: ['User', '$route.params.id'] } // with vue-router ]), diff --git a/examples/simple/index.js b/examples/simple/index.js index f0f5caf..b8e63d6 100644 --- a/examples/simple/index.js +++ b/examples/simple/index.js @@ -1,6 +1,6 @@ import Vue from 'vue/dist/vue.common.js' // import Vue from 'vue' -import { mapRessources } from '../../dist/vuex-jsdata-plugin.js' +import { mapResources } from '../../dist/vuex-jsdata-plugin.js' import { mapGetters } from 'vuex' // Init JsDataStore @@ -60,7 +60,7 @@ const vm = new Vue({ // mapGetters([ // 'DSUser', // ]), - mapRessources([ + mapResources([ { user: ['User', 'user_id'] }, ]) ), diff --git a/index.js b/index.js index ea4b2c2..4632097 100644 --- a/index.js +++ b/index.js @@ -19,20 +19,20 @@ export default function(_DStore, { } return function(store) { - const ressources = Object.values(DStore.definitions) + const resources = Object.values(DStore.definitions) let getters = {} let moduleState = {} set(store.state, namespace, {}) // init state getters[namespace] = (state) => state[namespace] // set global getter - ressources.forEach(({ class: ressourceName }) => { - const key = `${namespace}${ressourceName}` - getters[key] = (state) => state[ressourceName] - set(moduleState, ressourceName, {}) + resources.forEach(({ class: resourceName }) => { + const key = `${namespace}${resourceName}` + getters[key] = (state) => state[resourceName] + set(moduleState, resourceName, {}) }) const module = { - state: moduleState, // init ressource state + state: moduleState, // init resource state getters, mutations: { [MUTATION](state, { type, data }) { @@ -71,13 +71,13 @@ export default function(_DStore, { else commit(data) } - ressources.forEach((ressource) => { - ressource.on('Refresh', (res, id) => { + resources.forEach((resource) => { + resource.on('Refresh', (res, id) => { const data = res.get(id) commitRefresh(res, data) }) - // ressource.on('DS.change', (res, data) => commitRefresh(res, data)) - ressource.on('DS.afterDestroy', (res, data) => { + // resource.on('DS.change', (res, data) => commitRefresh(res, data)) + resource.on('DS.afterDestroy', (res, data) => { res.off('DS.change') commitDelete(res, data) setTimeout(() => { // FIXME @@ -87,30 +87,30 @@ export default function(_DStore, { }, 100) }) const refreshCb = (res, data) => commitRefresh(res, data) - ressource.on('DS.afterInject', function handler(res, data) { + resource.on('DS.afterInject', function handler(res, data) { refreshCb(res, data) - // ressource.off('DS.afterInject', handler) - // ressource.on('DS.change', refreshCb) + // resource.off('DS.afterInject', handler) + // resource.on('DS.change', refreshCb) }) }) } } -export function mapRessources(ressources = []) { +export function mapResources(resources = []) { function generateGetter(name, key) { return function getter() { const id = get(this, key) if (id === null || id === undefined || !this.$store.state.DS[name][id]) { - console.warn('no ressource with id:' + id) + console.warn('no resource with id:' + id) return undefined } // !IMPORTANT trigger reactivity return DStore.get(name, id); } } - const ressourceGetters = ressources.reduce((sum, ressource) => { - const getterName = Object.keys(ressource)[0] - ressource[getterName] = generateGetter(...ressource[getterName]) - return Object.assign(sum, ressource) + const resourceGetters = resources.reduce((sum, resource) => { + const getterName = Object.keys(resource)[0] + resource[getterName] = generateGetter(...resource[getterName]) + return Object.assign(sum, resource) }, {}) - return ressourceGetters + return resourceGetters }