Skip to content
This repository has been archived by the owner on Apr 19, 2019. It is now read-only.

Allow vuex strict mode #30

Closed
holic-cl opened this issue Feb 17, 2017 · 3 comments
Closed

Allow vuex strict mode #30

holic-cl opened this issue Feb 17, 2017 · 3 comments
Labels

Comments

@holic-cl
Copy link

holic-cl commented Feb 17, 2017

Hi!

Was trying to make this works on my project with no success. I have multiple modules on my store and have modules on different files, my code is like as follow

store/index.js

import VuexFire from 'vuexfire'
import * as actions from './actions'
import * as getters from './getters'

... // HERE I IMPORT SOME OTHERS MODULES

import raffles from './modules/raffles'

Vue.use(Vuex)
Vue.use(VuexFire)

const store = new Vuex.Store({
  strict: true, 
  actions,
  getters,
  modules: {
    ... // HERE I ADD THE OTHERS MODULES
    raffles
  },
  state: {
  },
  mutations: {
  }
})

export default store

store/modules/raffles.js

import VuexFire from 'vuexfire'

const state = {
  raffles: null
}

const mutations = VuexFire.moduleMutations('raffles')

export default {
  state,
  mutations
}

app.js

import Vue from 'vue'
import * as firebase from 'firebase'
import store from './store'
import { sync } from 'vuex-router-sync'
import App from './App'

// Initialize Firebase
var config = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.FIREBASE_DATABASE_URL,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID
}
const firebaseApp = firebase.initializeApp(config)
const db = firebaseApp.database()

const app = new Vue({
  store,
  ...App,
  firebase: {
    raffles: db.ref('raffles')
  }
})

export { app, store, firebaseApp }

I don't know why i am getting this full error on the console:

[Vue warn]: Error in watcher "state" 
(found in root instance)
warn @ vue.common.js?e881:521
vue.common.js?e881:3027 Uncaught Error: [vuex] Do not mutate vuex store state outside mutation handlers.
    at assert (eval at <anonymous> (app.js:904), <anonymous>:214:27)
    at Vue$3.store._vm.$watch.deep (eval at <anonymous> (app.js:904), <anonymous>:755:5)
    at Watcher.run (eval at <anonymous> (app.js:796), <anonymous>:3017:19)
    at Watcher.update (eval at <anonymous> (app.js:796), <anonymous>:2991:10)
    at Dep.notify (eval at <anonymous> (app.js:796), <anonymous>:580:13)
    at Object.reactiveSetter [as raffles] (eval at <anonymous> (app.js:796), <anonymous>:810:11)
    at Object.initWithValue (eval at <anonymous> (app.js:1391), <anonymous>:475:17)
    at bindAsArray (eval at <anonymous> (app.js:1391), <anonymous>:196:15)
    at bind (eval at <anonymous> (app.js:1391), <anonymous>:180:6)
    at Vue$3.created (eval at <anonymous> (app.js:1391), <anonymous>:336:8)

Thanks and any helps will be appreciated.

@posva
Copy link
Owner

posva commented Feb 17, 2017

Unfortunately, vuexfire 1 is not compatible with strict mode. This won't be the case for vuexfire 2 but when using v1 you need to remove the strict mode 🙁 (you should at least remove it for production builds btw).

I'm open to PRs to this, it should be quite easy: commit a mutation in the bind function instead of directly setting the state

@holic-cl
Copy link
Author

Ok, thanks, found a solution (and another problem, will make a PR and a new issue if i can't fix it).

@posva posva changed the title Uncaught Error: [vuex] Do not mutate vuex store state outside mutation handlers. Allow vuex strict mode Feb 17, 2017
@posva posva added the v1 label Apr 5, 2017
@posva posva added the firebase vuexfire v2, Firebase RTDB label Apr 18, 2018
@posva
Copy link
Owner

posva commented Jan 3, 2019

as RTDB will be supported in next version, there is no need to add this back to v1

@posva posva closed this as completed Jan 3, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
2 participants