diff --git a/README.md b/README.md index 6eff1ee7..aa5799d6 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ Includes: Todo: -- Auto sync with watchers +- Refinements - Documentation ### Table of contents @@ -40,7 +40,13 @@ The configuration as seen below is how you set up vuex-easy-firestore. This is t import createEasyFirestore from 'vuex-easy-firestore' const config = { // Your configuration! - // SEE `module/defaultConfig` for examples + moduleNameSpace: 'user/favourites', + // this is the vuex module path that will be created + docsStateProp: 'docs', + // this is the state property where your docs will end up inside the module + firestorePath: 'users/{userId}/favourites', + // this is the firestore collection path to your documents. You can use `{userId}` which will be replaced with `Firebase.auth().uid` + // SEE `src/module/defaultConfig` for more! } // do the magic 🧙🏻‍♂️ const easyFirestore = createEasyFirestore(config) @@ -53,49 +59,9 @@ store: { ### Config options -About the config file, better documentation will follow. For now see `module/defaultConfig` - - - - - - - +About the config file, better documentation will follow. For now see `src/module/defaultConfig` for all possibilities. - +You can also add other state/getters/mutations/actions to the module that will be generated. See [Custom state/getters/mutations/actions](#custom-stategettersmutationsactions) for details. ## Usage @@ -104,26 +70,26 @@ function syncHook (storeUpdateFn, store, id, doc, source, change) { You need to dispatch the following action once to open the channel to your firestore. ```js -dispatch('firestore/openDBChannel') +dispatch('user/favourites/openDBChannel') .then(console.log) .catch(console.error) ``` -For now any changes need to be notified manually. See 'Editing' below. - -Automatic 2 way sync is a WIP. +To automatically edit your vuex store & have firebase always in sync you just need to use the actions that were set up for you. ### Editing -The many actions you get for free: +With these 4 actions below you can edit the docs in your vuex module. +Anything you change will be automaticall changed in firestore as well! ```js -dispatch('firestore/patch', {id = '', ids = [], field = '', fields = []}) -dispatch('firestore/delete', {id = '', ids = []}) -dispatch('firestore/insert', {item = {}, items = []}) +dispatch('user/favourites/set', doc) // will dispatch `patch` OR `insert` automatically +dispatch('user/favourites/patch', doc) +dispatch('user/favourites/insert', doc) +dispatch('user/favourites/delete', id) ``` -All changes through the functions above work with batches. +With just the commands above you have complete in-sync vuex store & firestore! ### Fetching ```js @@ -131,10 +97,10 @@ All changes through the functions above work with batches. // @params {array} whereFilters an array of arrays with the filters you want. eg. `[['field', '==', false], ...]` // @params {array} orderBy the params of the firebase collection().orderBy() eg. `['created_date']` // @returns the docs -dispatch('firestore/fetch', {whereFilters = [], orderBy = []}) +dispatch('user/favourites/fetch', {whereFilters = [], orderBy = []}) ``` -See `module/actions` for a full list. +You only ever need to use the 5 actions above. You can look at `src/module/actions` for what's more under the hood. ### Custom state/getters/mutations/actions @@ -148,9 +114,3 @@ const vuexEasyFirestoreConfig = { actions: {}, // extra actions } ``` - - diff --git a/src/module/defaultConfig.js b/src/module/defaultConfig.js index 745728dc..fbcfeeab 100644 --- a/src/module/defaultConfig.js +++ b/src/module/defaultConfig.js @@ -17,38 +17,49 @@ function syncHook (storeUpdateFn, store, id, doc, source, change) { export default { moduleNameSpace: 'firestore', - docsStateProp: 'docs', // must be relative to rootState + // this is the vuex module path that will be created + docsStateProp: 'docs', + // this is the state property where your docs will end up inside the module firestorePath: '', - mapType: 'collection', // 'collection' only ('doc' not integrated yet) + // this is the firestore collection path to your documents. You can use `{userId}` which will be replaced with `Firebase.auth().uid` + mapType: 'collection', + // 'collection' only ('doc' not integrated yet) sync: { - type: '2way', // '2way' only ('1way' not yet integrated) + type: '2way', + // '2way' only ('read only' not yet integrated) where: [], orderBy: [], - // You HAVE to set all fields you want to be reactive on beforehand! + defaultValues: {}, + // About defaultValues: + // These are the default properties that will be set on each doc that's synced to the store or comes out of the store. + // You HAVE to set all props you want to be reactive on beforehand! // These values are only set when you have items who don't have the props defined in defaultValues upon retrieval // These default values will be merged with a reverse Object.assign on retrieved documents - defaultValues: {}, added: syncHook, modified: syncHook, removed: syncHook, + // see the syncHook function above to see what you can do }, fetch: { docLimit: 50, // defaults to 50 }, insert: { - // checkCondition (doc, storeRef) { return (params == 'something') }, checkCondition: null, + // A function where you can check something and force stopping the operation if you return `false` + // Eg. checkCondition (doc, docs) { return (doc.something != 'something') }, fillables: [], guard: [], }, patch: { - // checkCondition (id, fields, storeRef) { return (params == 'something') }, checkCondition: null, + // A function where you can check something and force stopping the operation if you return `false` + // Eg. checkCondition (id, fields, docs) { return (doc.something != 'something') }, fillables: [], guard: [], }, delete: { - // checkCondition (id, storeRef) { return (params == 'something') }, checkCondition: null, + // A function where you can check something and force stopping the operation if you return `false` + // Eg. checkCondition (id, docs) { return (doc.something != 'something') }, } }