handle strict: true for vuex store in the recommended setup

[bpkennedy]

Just reviewing how to use Vuex's strict mode for debugging state changes (https://vuex.vuejs.org/guide/strict.html) that are happening outside of mutations, and is it possible that the library doesn't work well with that? I am seeing callstack size exceeded errors in the console. I get them when just trying to initialize with the openDBChannel.

Can you reproduce this/get this working by chance? Not sure of the effort involved in any way, just thought I'd drop this out here. 😄 In no way a dealbreaker, I'm pretty happy with the way this is working!

Example implementation:

// AUTH.JS
firebase.auth().onAuthStateChanged(async (user) => {
  if (user) {
    try {
      await store.dispatch('userData/openDBChannel')
    } catch (error) {
      console.log(error)
    }
  } else {
  }
})

// STORE.JS
import Vue from 'vue'
import Vuex from 'vuex'
import vuexFirestoreModules from './vuexFirestoreModules'
import user from './modules/user'
import projects from './modules/projects'
Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    user,
    projects
  },
  plugins: [vuexFirestoreModules],
  strict: true // <-- this be the culprit here..
})

Will start throwing errors like this in the browser console:

[Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] Do not mutate vuex store state outside mutation handlers."
[vuex] Do not mutate vuex store state outside mutation handlers.

I suspect this may be due to how the library altogether is doing its updates? What are your thoughts?

[mesqueeb]

Hi @bpkennedy thanks so much for your message.

I have myself never worked with strict mode before. I will spend some time trying to use strict mode and see where I can improve my code to be compatible with it!

Another day another challenge!!! : D

---

After about two years of open source, I finally got accepted for Github Sponsors!

💜 github.com/sponsors/mesqueeb 💜

A little about me:

• I love open-source
• 6 months ago I got a son, and am trying to be an awesome father 😅
• I'm doing freelance work here and there as my main job

If anyone was helped with vuex-easy-firestore, I'd greatly appreciate any support!

BTW, donations get's paid DOUBLE by GitHub! (they're alchemists... 🦾)

Going forward 👨🏼‍💻

• I got great plans for the future of vuex-easy-firestore going above and beyond!! Look forward to it!!
• On to many more years of open-sourcing! 🎉

[HoraceKeung]

Got Error: [vuex] do not mutate vuex store state outside mutation handlers. when calling store.dispatch('myModule/openDBChannel') May have to do with this line of code: state._sync.unsubscribe = unsubscribe; where it is trying to mutate state._sync.unsubscribe without using mutation. Also May due to this line of code: state._sync.patching = 'error'; for same reason as above.

[mesqueeb]

@HoraceKeung Yeah, I make direct modifications to some state props in the store without using a mutation. This is only for specific props used internally by my library, unrelated to the user data.

The reason for me is that I didn't want to unnecessarily clutter the mutation history with several dozens of mutations coming from my library, and also didn't want to increase library size by adding more code just making simple mutations.

If you have any good counter argument why I should change the behaviour to use mutations instead of directly modifying state props, let me know. I will consider changing it based on your arguments.

[HoraceKeung]

I believe there is misunderstanding. Sorry, I am not trying to start an argument, I am asking a question: whether the above 2 errors are caused by the fact that you are modifying the state without mutation?

[mesqueeb]

Yes i believe so. I should change my library’s underlying state modifications to only use mutations instead of directly modifying the state, but i’m not sure i want to do that....

For the time being you can prevent this error by not using strict mode on vuex.

_{Sent with GitHawk}

[garyo]

Hi; I also ran into this same error:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside mutation handlers."

and it took me quite a long time to figure out what was going on, why nothing was working. I think strict mode is very useful, so I don't really want to turn it off. But with strict mode on, I just end up in the debugger and this module doesn't work. Maybe you could detect strict mode and if it's enabled, use mutations? Or alternatively, use some private state outside of vuex?

[mesqueeb]

@garyo I did have a long thought about how to do this, but I couldn't come up with a good way. I'm using state props for some internal functions and save stuff like which queries have been called already etc.

Extracting all those state values might break stuff for users who rely on that, but using mutations for all these values would immensely clutter the mutation history to the point it is too cluttered to be useful for developers any more.

So i'm kind of in a pinch and don't know what to do... If you have any advice or want to look at my source code and give me some tips,, that'd be really helpful. Even if we go for a breaking change and bump a major version, i'd be willing to do that if I can greatly improve my source code,but I'd need some help from better devs than me. XD

_{Sent with GitHawk}

[garyo]

Just a thought: how about, assuming ES6 or later, create a private symbol on the store for your use? http://exploringjs.com/es6/ch_symbols.html#sec_symbols-as-prop-keys

[mesqueeb]

@garyo Thank you for your thought!! I didn't really work with symbols before, but would people still be able to access the underlying state props, even if the prop names are symbols?

[mesqueeb]

I think either way this would be a breaking change... Right? I will think about how to best handle this for v2.0 (planned for when Vuex 3.0 releases)

Feel free to create issues if you have other suggestions as well! 🙃

_{--
Vuex Easy Firestore was made with ♥ by Luca Ban.
If this library helped you in any way you can support me by buying me a cup of coffee.}

[garyo]

I was thinking that you could put all your private state underneath a symbol, i.e. state[VUEX_EASY_FIRESTORE_PRIVATE_SYM].whatever = some thing so all your private state would be invisible to the rest of the vuex world. Symbols are not considered normal own properties for instance, so I expect modifying your data inside the symbol wouldn't trigger the vuex strict mode warning (though you'd have to test that). I don't think that would necessarily be a breaking change.

[mesqueeb]

@garyo I see what you mean!

Could you try to help out and make a PR? 😇 Here's where I define my state, including the props I use internally: https://github.com/mesqueeb/vuex-easy-firestore/blob/master/src/module/state.ts

For the rest, the action and mutation files all have "direct state mutations" like these: https://github.com/mesqueeb/vuex-easy-firestore/blob/master/src/module/mutations.ts#L26

You don't need to tackle all "direct state mutations" if you just do a few, I can easily find all the others and make the mutation similar to how you did it.

As long as users can still access the state config with eg. store.state.myVEFModule._conf.sync.where I'm ok with the change!

Thanks!! 😅

---

After about two years of open source, I finally got accepted for Github Sponsors!

💜 github.com/sponsors/mesqueeb 💜

A little about me:

• I love open-source
• 6 months ago I got a son, and am trying to be an awesome father 😅
• I'm doing freelance work here and there as my main job

If anyone was helped with vuex-easy-firestore, I'd greatly appreciate any support!

BTW, donations get's paid DOUBLE by GitHub! (they're alchemists... 🦾)

Going forward 👨🏼‍💻

• I got great plans for the future of vuex-easy-firestore going above and beyond!! Look forward to it!!
• On to many more years of open-sourcing! 🎉

[louisameline]

We need to see if Vuex will remove that "changes-in-mutations-only" requirement in their next version.