Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature] Add field name to internal mutations #51

Open
SaphuA opened this issue Nov 11, 2019 · 2 comments
Open

[Feature] Add field name to internal mutations #51

SaphuA opened this issue Nov 11, 2019 · 2 comments

Comments

@SaphuA
Copy link

SaphuA commented Nov 11, 2019

When one uses the strict=false method all the mutations look like this in the Vue dev tools:
MyStoreName/__mystorename_internal_mutator__

I think having the field name in there would help a lot with debugging with Vue Dev Tools.

@SaphuA SaphuA changed the title Vue devtools and strict=false Vue devtools and strict=false should have field name in mutation Nov 11, 2019
@michaelolof
Copy link
Owner

So the goal of the __internal_mutator__ and __internal_getter__ is to act as a parent mutator or getter for the state when strict is set to false.

Adding the field name would defeat that purpose.

Eg say you have a store like this

class UserStore extends createModule({ strict: false }){
  firstname = "John";
  lastname = "Doe"
}

One way to generate the actual vuex store would something like this.

const userStore = {
  state: {
    firstname: "John",
    lastname: "Doe"
  },
  
  mutations: {
    __generated_mutator_setFirstName__: ( state, payload ) =>state.firstname = payload,
    __generated_mutator_setLastName__: ( state, payload ) =>state.lastname = payload,
  },

  getters: {
    __generated_getter_getFirstName__: ( state ) => state.firstname,
    __generated_getter_getLastName__: ( state ) => state.lastname,
  },
  
}

My issue with this is that for each state, there is an additional mutation and getter defined. I think this is unecessary. And there's really no difference in functionality between the two mutations and getters.

This is where the internal_mutator comes into play, so you have something like this.

const userStore = {
  state: {
    firstname: "John",
    lastname: "Doe"
  },

  mutations: {
    __userStore_internal_mutator__: (state, { field, payload }) => state[ field ] = payload,
  },

  getters: {
    __userStore_internal_getter__: (state, field) => state[ field ]
  }
}

@SaphuA
Copy link
Author

SaphuA commented Nov 11, 2019

Yes exactly. So the only benefit of adding the field name would be a cleaner devtools experience. But from what I understand at really no cost - unless it's difficult to implement of course.

@SaphuA SaphuA changed the title Vue devtools and strict=false should have field name in mutation [Feature] Add field name to internal mutations Nov 21, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants