Изменение состояния Vuex не является реактивным - PullRequest
Новая
       5

Изменение состояния Vuex не является реактивным

0 голосов
/ 05 марта 2020

Я работаю с системой Vuex и Firebase Auth. Я просто хочу сохранить в Vuex пользовательский объект, который я получаю: 

firebase.auth().getCurrentUser

, чтобы при каждом изменении он обновлял представления. Но у меня проблемы с этим. 

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);
      }
    }
  }
});

Аккаунт. 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>

Модальный. 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>

Я вижу, используя Vue Dev Tools, что при отправке новый пользователь в Модале. vue

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

, что состояние Vuex обновлено правильно, но представление в Account. vue нет. Но если я нажму кнопку «зафиксировать эту мутацию» в инструментах разработки, то представление обновится! Как я могу исправить это поведение?

Ответы [ 2 ]

0 голосов
/ 06 марта 2020

Вы можете попробовать это: 

SET_USER(state, data) {
  Vue.$set(state.user, 'data', data)
}
0 голосов
/ 05 марта 2020

попробуйте это решение: 

 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);
          }
        }
      }
    });

Аккаунт. 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>
...