Question

我正在尝试获取要存储在状态中的Firestore数据，但该数据不会显示在该状态下的Vue开发工具中。

当我console.log（）通过存储操作获取的数据时，我可以看到获取的数据正确，但是不会更新状态。

我正在首页和另一页上使用中间件来调度我的操作，以获取所需的数据。

我还在下面的中间件中使用了条件语句来尝试仅在我的其他状态变量不为null时调度操作，因为firestore查询需要state.user

//this is check-auth middleware
 export default function(context) {
 // in initAuth we are forwarding it the req
  context.store.dispatch('initAuth', context.req)
  console.log('WE ARE GRABBING USER INFO')
  context.store.dispatch('grabUserInfo', context.req)
  console.log('There is already user info there')
  // context.store.dispatch('currentUser')
   }

我们正在分派grabUserInfo以运行其中包含firestore查询的操作。

  grabUserInfo(vuexContext, context) {
     let userInfo = []
     var userRef = db.collection('users')
      var query = userRef
        .where('user_id', '==', vuexContext.state.user)
        .get()
        .then(querySnapshot => {
          querySnapshot.forEach(doc => {
          console.log(doc.data())
          userInfo.push(doc.data())
          })
        })
      vuexContext.commit('setUserInfoSub', userInfo)
    }

我

   console.log(doc.data()) is showing

用户：[“ noFace2”] 订阅：[“ noFace3”] user_id：“ VbomJvANYDNe3Bek0suySs1L8oy1” 用户名：“ noFace1”

我的信息应该经过变异并提交状态，但不会在我的状态vue开发工具中显示。

 setUserInfoSub(state, payload) {
    state.userInfoSub = payload
  }

我不明白数据如何不会以我的状态结束。这是我的状态和变异。

  const createStore = () => {
   return new Vuex.Store({
    state: {
     loadedCards: [],
     user: null,
     username: null,
     userInfoSub: [],
     token: null
   },
    mutations: {
    setCards(state, cards) {
    state.loadedCards = cards
    },
    setUser(state, payload) {
    state.user = payload
    },
     setUsername(state, payload) {
     state.username = payload
    },
    setUserInfoSub(state, payload) {
    state.userInfoSub = payload
    },
    setToken(state, token) {
    state.token = token
  }

Answer 1

将您的突变更改为此：

 setUserInfoSub(state, payload) {
    Vue.set(state, 'userInfoSub', payload);
    }

这将允许Vue的反应系统重新启动以进行状态变量重新分配。

根据@Alexander的评论，鉴于Firebase查询的异步性质，您还应该将commit()移到then()内。

中间件到Vuex状态不更新状态？

1 个答案: