Skip to content

Instantly share code, notes, and snippets.

@cairin
Created October 26, 2018 13:39
Show Gist options
  • Save cairin/9a64604bb88ff36b478886b6de368281 to your computer and use it in GitHub Desktop.
Save cairin/9a64604bb88ff36b478886b6de368281 to your computer and use it in GitHub Desktop.
Vuex Store
// store/modules/example.js
const state = {
example: null
}
const mutations = {
setExample: function (state, payload) {
state.example = payload
}
}
const actions = {
loadExample: function (context, payload) {
context.commit('setExample', payload)
}
}
const getters = {
example: state => {
return state.example
}
}
export default {
state,
mutations,
actions,
getters
}
// store/modules/index.js
/**
* The file enables `@/store/index.js` to import all vuex modules
* in a one-shot manner. There should not be any reason to edit this file.
*/
const files = require.context('.', false, /\.js$/)
const modules = {}
files.keys().forEach(key => {
if (key === './index.js') return
modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})
export default modules
// other imports
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
// store/index.js - this file should also just be called index.js, gists just don't allow duplicates.
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import modules from './modules'
Vue.use(Vuex)
export default new Vuex.Store({
modules,
strict: process.env.NODE_ENV !== 'production',
plugins: [createPersistedState()]
})
// store/modules/vuexfire-example.js
import { firebaseMutations, firebaseAction } from 'vuexfire'
const state = {
example: null
}
const mutations = {
...firebaseMutations,
otherCustomMutation (state) {
state.example = null
}
}
const actions = {
setUserRef: firebaseAction((context, ref) => {
console.log('binding reference')
context.bindFirebaseRef('example', ref, { readyCallback: function () {
console.log('reference bound')
// TODO: Anything else you want to do here..
} })
}),
otherCustomAction (context) {
context.commit('otherCustomMutation')
}
}
const getters = {
example: state => {
return state.example
}
}
export default {
state,
mutations,
actions,
getters
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment