fiery-vuex
Vuex binding for Google Firebase Cloud Firestore.
Relies on fiery-data and is a sister library to fiery-vue - you can go there to see more advanced examples on how to call $fiery
Features
- You can bind documents and collections to the store, and change them dynamically through actions.
- You can create actions & mutations which have access to
$fiery
for saving, removing, etc - Strict mode ensures real-time updates of a sub collection are done with an anonymous commit so when a Store is strict warnings are not thrown.
Features inherited from fiery-data
- Documents example
- Collections (stored as array or map) example
- Queries (stored as array or map) example
- Streams (stored as array or map) example
- Pagination example
- Real-time or once example
- Adding, updating, sync, removing, remove field example
- Sub-collections (with cascading deletions!) example
- Return instances of a class example
- Add active record methods (sync, update, remove, clear, getChanges) example
- Control over what properties are sent on save example
- Encode & decode properties example
- Adding the key and exists to the document example
- Sharing, extending, defining, and global options example
- Callbacks (error, success, missing, remove) example
- Custom binding / unbinding example
Contents
Dependencies
- fiery-data: ^0.4.0 (pulled into build files)
- firebase ^5.0.0 (a runtime dependency only, since you are passing the references)
- vue: ^1.0.28 (not an actual dependency, since you are calling
Vue.use
yourself) - vuex: ^2.2.0 (not an actual dependency)
Installation
npm
Installation via npm : npm install --save fiery-vuex
Usage
Setup
VueVue // FieryVuex.$fiery is available now, but not needed const app = firebaseconst fs = firebase;
Example (ES2015)
// The store has the following functionality:// - store.commit( 'finishTodo', todo )// - store.commit( 'nextPage' )// - store.dispatch( 'setTodo', todoId )// - store.dispatch( 'loadTodos' )// - store.dispatch( 'searchTodos', {done: true, limit: 10} )// - store.dispatch( 'checkForChanges' ) const store = state: currentTodo: null todos: // this should not be used in strict mode, since this document or collection will receive real-time updates outside of a mutation ... mutations: // functions you want access to $fiery to perform operations ... // mutation which is given a result of a binding { statetodos = } // or you can specify multiple mutations at once which take binding results ... actions: // bind results of actions to variables, automatically calls listed mutation // when data changes from Firestore ... // custom actions with access to $fiery ...
Example (TypeScript)
Example (JS)
var fieryMutation = FieryVuexfieryMutation;var fieryBinding = FieryVuexfieryBinding;var fieryAction = FieryVuexfieryAction;var fieryState = FieryVuexfieryState; var store = // You must wrap the entire state with fieryState if you want access to $fiery // this should not be used in strict mode, since this document or collection will receive real-time updates outside of a mutation state: mutations: finishTodo: nextPage: { statetodos = ; } { statecurrentTodo = ; } actions: // For JS, you need to list the action name and return the result of calling $fiery setTodo: loadTodos: searchTodos: checkForChanges: ;
Document Example
const SET_POST = 'setPost' const store = state: post: null mutations: // since state should only be modified synchronously through mutations, this // is necessary so the action below can update the post when it changes. { statepost = // you can do other stuff in here, stuff you want done each time post changes } // this is equivalent and can generate multiple mutations in one call. ... actions: ... // SET post to posts/123// this returns a promise which resolves when the post is first loaded from cache/serverstore
Collection Example
const SET_GROUPS = 'setGroups' const store = state: groups: mutations: // since state should only be modified synchronously through mutations, this // is necessary so the action below can update the groups when they change { stategroups = // you can do other stuff in here, stuff you want done each time groups changes } // this is equivalent and can generate multiple mutations in one call. ... actions: ... // this returns a promise which resolves when the post is first loaded from cache/serverstore // all groupsstore // all groups with user 34store // all groups with code ABC
Mutation Example
const FINISH_TASK = 'finishTask'const ADD_TASK = 'addTask' const store = mutations: // This will call mutations normally but passes $fiery so operations can be // performed on the state or payload. ... // updates the task and saves it to Firestorestore // adds a new taskstore
Action Example
const EVALUATE_CHANGES = 'evaluateChanges'const CHECK_FOR_CHANGES = 'checkForChanges' const store = state: todo: null mutations: { // do something with the changes found in todo } actions: // This will call actions normally but passes $fiery so operations can be // performed on the context or payload ... // runs the possibly asynchronous operation of comparing local changes to// remote changes for a todostore //: Promise
Strict Example
Vue const store = strict: true // ...