Computed value that depends on a state in Vuex store with initial value 'undefined' lose reactivity

[bingtimren]

Version

v1.4.2

Reproduction link

https://github.com/bingtimren/nuxt-store-state-undefined-bug

Steps to reproduce

npm run dev

Goto http://localhost:3000, then

Open Vue tools, switch to Vuex tab, find Base State has states "counter" and "message1", but "message2" is missing.

Click "Increase", watch mutations. Although "message2" appears in state, the computed value "messages2" has no reactivity.

I first thought this might be a Vuex bug, but I tested the same and found Vuex works just fine. See https://jsfiddle.net/n9jmu5v7/22559/

What is expected ?

In my store/index.js, I have

export const state = () => ({
  counter: 0,
  message1: "",
  message2: undefined
})

In my page, I have computed values that maps to the states:

computed: {
    ...mapState({
      counter:'counter',
      message1:'message1',
      message2:'message2'
    }),
  },

Both computed values "message1" and "message2" should be reactive.

What is actually happening?

"message2" lost reactivity because the initial value is "undefined"

This problem relates to Nuxt. Vuex works just fine. See https://jsfiddle.net/n9jmu5v7/22559/

Additional comments?

It seems the cause of the problem is that in the Base State (the initial Vuex store state), "message2" is missing because its initial value is undefined. Due to this reason, the computed value "message2" does not link its dependency to this state and lost reactivity.

Also this is not a Vuex problem as shown in the above mentioned fiddle.

_{This bug report is available on Nuxt community (#c7661)}

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.