[Vuejs]-Vue constructor not having local state

by

0👍

✅

Addressing the first problem first.

The problem starts here:

state: {
  greeting:'hola'
},

The value of state points to a specific object. That object then gets passed around but at no point is a copy taken. The result is that both test1x1 and test1x2 will have the same object for state.

You can confirm this by adding a bit of console logging:

console.log(test1x1.state === test1x2.state)

The way Vuex handles this problem is to allow state to be a function, just like data:

state () {
  return {
    greeting:'hola'
  }
},

Each time the state function is invoked it will return a new object.

As you aren’t using Vuex you would need to ensure that you call the state function at the correct point to generate the relevant object. Something like this:

data () {
  if (typeof state === 'function') {
    state = state()
  }

  return { state }
},

So, to your second problem. I’m afraid I don’t know what the problem is there. However, I very much doubt that ‘when pressing button nothing happens’. It may not update the message but that isn’t the same as ‘nothing happens’. It should be relatively straightforward to add in some console logging at each stage and to establish exactly what does and doesn’t happen. Once you’ve gathered all of that extra information about precisely what is happening it should be fairly simple to pinpoint precisely where the disconnect is occurring.

My suspicion would be that you’ve made some other changes to withStore that are causing this new problem. It could also be a file caching problem, so that the code you’re running is not the code you think it is. Either way the extra logging should reveal all.

If you need further help with that then please update the question with the extra information gathered via console logging.

Update:

This is why the updated code causes an infinite rendering loop:

  1. Inside the render function there is a call to test1x1.commit('init').
  2. Inside commit it accesses the property this.state. This will add the property this.state as a rendering dependency for the component. It doesn’t matter what the current value of this.state is, it’s the property itself that is the dependency, not its current value.
  3. On the next line it sets test1x1.state={greeting:'hola'}. This changes the value of the state property. This is the same state that has just been registered as a rendering dependency. As a rendering dependency has now changed the component will be re-added to the rendering queue, even though it hasn’t finished the current rendering yet.
  4. Eventually Vue will work its way through the rendering queue and get back to this same component. It will again call render to try to render the component. The previous steps will all occur again and so the component keeps being rendered over and over.

The bottom line here is that you shouldn’t be initialising these data structures within the render function in the first place. There are various places you might create them but inside render does not appear to be appropriate based on the code you’ve provided.

Leave a comment