Question

我正在使用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);
      }
    }
  }
});

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>

当我在Modal.vue中分派新用户时，我可以看到使用Vue Dev Tools

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

Vuex状态已正确更新，但Account.vue中的视图未正确更新。但是，如果我在开发工具中按下“提交此突变”按钮，视图就会更新！如何解决此问题？

Answer 1

尝试此解决方案：

Sub LoopAllSlides()        
    Dim i           As Integer

    For i = 0 To 2000
        Dim Endpoint As Single
        Endpoint = Timer + 10
        Do While Timer < Endpoint        'This loop works dont delete
            DoEvents
        Loop
        ActivePresentation.UpdateLinks
        With ActivePresentation.SlideShowSettings
            .AdvanceMode = ppSlideShowUseSlideTimings
            .LoopUntilStopped = msoFalse
            .Run
        End With
    Next i

    'Quit Application Function
    IWishICouldQuitYou

End Sub

Function IWishICouldQuitYou()
    With Application
        For Each w In .Presentations
            w.Save
        Next w
        .Quit
    End With

End Function

Account.vue

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

Answer 2

您可以尝试以下方法：

SET_USER(state, data) {
  Vue.$set(state.user, 'data', data)
}

Vuex状态更改无反应

2 个答案: