Question

我正在研究由Vuex状态存储驱动的Vue应用。
现在，我正在尝试将其连接到Google Firebase Firestore，以进行持久的数据存储和检索。

当前，我正在运行一个模式，其中vuex action会触发firestore查询，而该查询又会commits/dispatches和mutation/action来更新商店。虽然这不一定看起来是错误的，但确实感觉有些复杂/精心设计，我想知道是否存在更干净的模式/最佳实践来协调这种相互作用。

当前解决方案的示例：

// firebase.js
export default {
fetchUserId: user => {
    usersCollection.where('user', '==', user).limit(1).get().then(u => {
        if(u.size > 0 && u.docs[0].exists)
            store.dispatch('setLoggedInUserId', userId)
        else
            throw 'user not found in DB: ' + user
    })
},
watchProjects: userId => {
    usersCollection.doc(userId).collection('projects').onSnapshot(querySnapshot => {
        const projects = []
        querySnapshot.forEach(doc => {
            projects.push({ id: doc.id, ...doc.data() })
        })
        store.commit('updateProjects', projects)
    })
}}

在商店中：

actions: {
loginUser({ commit }, user) {
  commit('setLoggedInUser', user)
  firestore.fetchUserId(user)
},
setLoggedInUserId({ commit }, userId) {
  commit('setLoggedInUserId', userId)
  firestore.watchProjects(userId)
},

VueJS + Vuex + Firestore：编排数据查询

0 个答案: