Vuex: views don't update on vuex state an getters changed

[kingRayhan]

Version

3.0.1

Reproduction link

https://github.com/kingRayhan/vuex-problem-repo

Steps to reproduce

git cone https://github.com/kingRayhan/vuex-problem-repo.git
npm install
npm run serve

What is expected?

I editing vuex state , state is changing in vuex devtools bit my view is not updating

What is actually happening?

State is updating , but front-end not updates

See the video plz -> https://www.youtube.com/watch?v=s7iQ59MYuBQ

---

Hi guys,
I was working in a big project, I integrated vuex on that project in one point of development progress,
Everything was going well but I got one problem, may be it is not any problem , It could be a mis conception of me about vuex.
To demonstrate that mis conception or issue I created this very simple application, unfortunately I face same issue here also,

When I push to vuex state by commiting a muation, I see state is change but my front-end is not chaning

[ktsn]

Your reproduction link looks not a real reproduction. Please check it really is intended one.

[kingRayhan]

What do you mean by real reproduction?
Can you please explain ?

[ktsn]

You reproduction link (https://github.com/kingRayhan/vuex-problem-repo) does not shows any problem. It does not commit any mutations and not have state in the store.

[kingRayhan]

Oh sorry, can you check again please? I pushed again properly 😎

[kingRayhan]

I worked in

./src/views/Home.vue

[ktsn]

Thanks. The problem is your are assigning an object into array by using index access. You should use Vue.set.

See:
https://vuex.vuejs.org/guide/mutations.html#mutations-follow-vue-s-reactivity-rules
https://vuejs.org/v2/guide/list.html#Caveats

[kingRayhan]

Thanks @ktsn ❤️

You teach me one new thing, I didn't know about Vue.set

My problem solved

[u2ros]

Even after working with Vue for some time, and of course forgetting about reactivity rules, i stumbled too and came upon this thread ;)

[mattdeclaire]

For anyone who ends up here with the same problem I had, I was trying to use mapState() on getters.

// bad
computed: {
   ...mapState([
      'players',
      'currentPlayerID',
      'currentPlayer', // <= getter
   ]),
}

// good
computed: {
   ...mapState([
      'players',
      'currentPlayerID',
   ]),
   ...mapGetters([
      'currentPlayer',
   ]),
}