Vuex state change is not reactive

Question

I am working with Vuex and Firebase Auth system. I just want to store with Vuex the user object that i get from:

firebase.auth().getCurrentUser

so that every time it changes, it updates the views. But i ve troubles with this.

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    user: {
      loggedIn: false,
      data: null
    }
  },
  getters: {
    user(state){
      return state.user
    }
  },
  mutations: {
    SET_LOGGED_IN(state, value) {
      state.user.loggedIn = value;
    },
    SET_USER(state, data) {
      state.user.data = data;
    }
  },
  actions: {
    fetchUser({ commit }, user) {
      commit("SET_LOGGED_IN", user !== null);
      if (user) {
        commit("SET_USER", user);
      } else {
        commit("SET_USER", null);
      }
    }
  }
});

Account.vue

<template>
   <ion-item>
                <ion-label @click="openModal()" position="stacked">Your name</ion-label>
              {{user.data.displayName}}
             </ion-item>
  </template>
  computed: {
    // map `this.user` to `this.$store.getters.user`
    ...mapGetters({
      user: "user"
    })
  },
  methods: {
        openModal() {
      let us = this.$store.getters.user;
      return this.$ionic.modalController
        .create({
          component: Modal,
          componentProps: {
            data: {
              content: 'New Content',
            },
            propsData: {
              pro: us.data.displayName
            },
          },
        })
        .then(m => m.present())
        },

  .
 .
.  
</script>

Modal.vue

<template>
<ion-app>
        <h1>MODAL</h1>

    <ion-input  :value="prop" @input="prop = $event.target.value"></ion-input>
    <ion-button @click="clos()">Save</ion-button>

</ion-app>
</template>
<script>
import firebase from "firebase";
export default {
    props:['pro'],
    data(){
        return{
            prop: this.pro
        }
    },
    methods:{
        clos(){
            let vm = this;
            let user = firebase.auth().currentUser;
            window.console.log("updating",vm.prop)
            user.updateProfile({
                displayName: vm.prop
            }).then(function(){
                 user = firebase.auth().currentUser;
                 vm.$store.dispatch("fetchUser",user);
            }).catch(function(err){
window.console.log("err",err);
            })

            this.$ionic.modalController.dismiss();
        }
    }
}
</script>

I can see using Vue Dev Tools that when I dispatch the new user in Modal.vue

vm.$store.dispatch("fetchUser",user);

that the Vuex state is correctly updated, but the view in Account.vue is not. But if I press the button 'commit this mutation' in the dev tools the view updates! How can I fix this behavior?

computed: { user(): { return this.$store.getters.user; } } — MedaiP90

Abdelrhman Gemi Abdelrhman Gemi · Accepted Answer · 2020-03-05T15:27:42

try this solution:

 import Vue from "vue";
    import Vuex from "vuex";
    Vue.use(Vuex);
    export default new Vuex.Store({
      state: {
        user: {
          loggedIn: false,
          data: null
        }
      },
      getters: {
        user(state){
          return state.user;
        },
        userData(state){
          return state.user.data;
        }
      },
      mutations: {
        SET_LOGGED_IN(state, value) {
          state.user.loggedIn = value;
        },
        SET_USER(state, data) {
          state.user.data = data;
        }
      },
      actions: {
        fetchUser({ commit }, user) {
          commit("SET_LOGGED_IN", user !== null);
          if (user) {
            commit("SET_USER", user);
          } else {
            commit("SET_USER", null);
          }
        }
      }
    });

Account.vue

<template>
   <ion-item>
                <ion-label @click="openModal()" position="stacked">Your name</ion-label>
              {{user.displayName}}
             </ion-item>
  </template>
  computed: {
    // map `this.user` to `this.$store.getters.user`
    ...mapGetters({
      user: "userData"
    })
  },
  methods: {
        openModal() {
      let us = this.$store.getters.userData;
      return this.$ionic.modalController
        .create({
          component: Modal,
          componentProps: {
            data: {
              content: 'New Content',
            },
            propsData: {
              pro: us.displayName
            },
          },
        })
        .then(m => m.present())
        },

  .
 .
.  
</script>

Vuex state change is not reactive

2 Answers