How to use vuexfire - 9 common examples
To help you get started, we’ve selected a few vuexfire examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
webcore-it / nuxt2-ssr-on-firebase / src / store / bitcoin.js View on Github 
console.log('vuex.bitcoin.actions.init');
dispatch('bindPricePredictionsRef', firebase.firestore().collection('pricePredictions'));
},
async add({}, data) {
console.log('vuex.bitcoin.actions.add', data);
const prediction = {
trend: data.trend,
createdAt: firebase.firestore.FieldValue.serverTimestamp(),
};
await firebase.firestore().collection('pricePredictions').add(prediction);
},
bindPricePredictionsRef: firebaseAction(({ bindFirebaseRef }, ref) => {
console.log('vuex.bitcoin.actions.bindPricePredictionsRef', ref);
bindFirebaseRef('pricePredictions', ref);
}),
};
// ======================================================================
// MUTATIONS
// ======================================================================
export const mutations = {};.doc(user.email.replace('@', '_at_').replace(/\./g, '_dot_'))
.set({
name: user.displayName,
email: user.email,
icon: user.photoURL
})
commit('setCredential', { user })
},
async initSingle({ commit }, { id }) {
const snapshot = await firestore
.collection('posts')
.doc(id)
.get()
commit('savePost', { post: snapshot.data() })
},
initUsers: firebaseAction(({ bindFirebaseRef }) => {
const usersCollection = firestore.collection('users')
bindFirebaseRef('users', usersCollection)
}),
initPosts: firebaseAction(({ bindFirebaseRef }) => {
const postsCollection = firestore
.collection('posts')
.orderBy('createdAt', 'desc')
bindFirebaseRef('posts', postsCollection)
}),
addPost: firebaseAction((ctx, { id, email, body, createdAt }) => {
firestore
.collection('posts')
.doc(`${id}`)
.set({
id,
from: email,icon: user.photoURL
})
commit('setCredential', { user })
},
async initSingle({ commit }, { id }) {
const snapshot = await firestore
.collection('posts')
.doc(id)
.get()
commit('savePost', { post: snapshot.data() })
},
initUsers: firebaseAction(({ bindFirebaseRef }) => {
const usersCollection = firestore.collection('users')
bindFirebaseRef('users', usersCollection)
}),
initPosts: firebaseAction(({ bindFirebaseRef }) => {
const postsCollection = firestore
.collection('posts')
.orderBy('createdAt', 'desc')
bindFirebaseRef('posts', postsCollection)
}),
addPost: firebaseAction((ctx, { id, email, body, createdAt }) => {
firestore
.collection('posts')
.doc(`${id}`)
.set({
id,
from: email,
body,
createdAt
})
}),import { firebaseAction } from 'vuexfire'
import { db } from '@/plugins/firebase'
export default {
switchSale: ({ commit }) =>
commit('SWITCH_SALE'),
updateHighprice: ({ commit }, value) =>
commit('UPDATE_HIGH_PRICE', value),
setCategory: ({ commit }, value) =>
commit('SET_CATEGORY', value),
setProductsRef: firebaseAction(({ bindFirebaseRef }) =>
bindFirebaseRef('products', db.ref('products'))
)
}.collection('posts')
.doc(id)
.get()
commit('savePost', { post: snapshot.data() })
},
initUsers: firebaseAction(({ bindFirebaseRef }) => {
const usersCollection = firestore.collection('users')
bindFirebaseRef('users', usersCollection)
}),
initPosts: firebaseAction(({ bindFirebaseRef }) => {
const postsCollection = firestore
.collection('posts')
.orderBy('createdAt', 'desc')
bindFirebaseRef('posts', postsCollection)
}),
addPost: firebaseAction((ctx, { id, email, body, createdAt }) => {
firestore
.collection('posts')
.doc(`${id}`)
.set({
id,
from: email,
body,
createdAt
})
}),
callAuth() {
firebase.auth().signInWithRedirect(provider)
},
loadComplete({ commit }) {
commit('setIsLoaded', true)
}const createStore = () => {
return new Vuex.Store({
state: {
user: null,
account: null
},
getters: {
isAuthenticated (state) {
return !!state.user
}
},
actions: {
setAccountRef: firebaseAction(({ bindFirebaseRef }, path) => {
return bindFirebaseRef('account', firebase.database().ref(path))
}),
resetUser ({
state
}) {
state.user = null
},
userCreate ({ state }, account) {
return firebase.auth()
.createUserWithEmailAndPassword(account.email, account.password)
.then(({ user }) => {
return createNewAccount(user)
})
},
userGoogleLogin ({ commit }) {
firebase.auth().useDeviceLanguage()import { firebaseAction, firebaseMutations } from 'vuexfire'
const state = {
categories: [],
bookmarks: [],
favourites: []
}
const mutations = {
...firebaseMutations
}
const actions = {
loadCategories: firebaseAction(({ bindFirebaseRef, unbindFirebaseRef }, { ref }) => {
bindFirebaseRef('categories', ref)
}),
loadFavourites: firebaseAction(({ bindFirebaseRef, unbindFirebaseRef }, { ref }) => {
bindFirebaseRef('favourites', ref)
}),
loadBookmarks: firebaseAction(({ bindFirebaseRef, unbindFirebaseRef }, { ref }) => {
bindFirebaseRef('bookmarks', ref)
})
}
export default {
state,
mutations,
actions
}import { firebaseAction, firebaseMutations } from 'vuexfire'
const state = {
categories: [],
bookmarks: [],
favourites: []
}
const mutations = {
...firebaseMutations
}
const actions = {
loadCategories: firebaseAction(({ bindFirebaseRef, unbindFirebaseRef }, { ref }) => {
bindFirebaseRef('categories', ref)
}),
loadFavourites: firebaseAction(({ bindFirebaseRef, unbindFirebaseRef }, { ref }) => {
bindFirebaseRef('favourites', ref)
}),
loadBookmarks: firebaseAction(({ bindFirebaseRef, unbindFirebaseRef }, { ref }) => {
bindFirebaseRef('bookmarks', ref)
})
}
export default {
state,
mutations,
actions
}categories: [],
bookmarks: [],
favourites: []
}
const mutations = {
...firebaseMutations
}
const actions = {
loadCategories: firebaseAction(({ bindFirebaseRef, unbindFirebaseRef }, { ref }) => {
bindFirebaseRef('categories', ref)
}),
loadFavourites: firebaseAction(({ bindFirebaseRef, unbindFirebaseRef }, { ref }) => {
bindFirebaseRef('favourites', ref)
}),
loadBookmarks: firebaseAction(({ bindFirebaseRef, unbindFirebaseRef }, { ref }) => {
bindFirebaseRef('bookmarks', ref)
})
}
export default {
state,
mutations,
actions
}
