【发布时间】：2020-01-20 08:31:09
【问题描述】：
大家早上好。
几天来，我一直在努力开发一个我正在尝试构建以获得一些经验的应用程序。我做了很多，但现在卡在编辑页面，因为我无法掌握状态管理方面。
所以这是我的问题。
我的 ProfilePage.vue 中有一个按钮，如果我点击它，我会转到 EditInvoice.vue 页面。
<button @click="onSubmit"><router-link to="/edit-invoice">Edit</router-link></button>
我的 store.js 状态：
state: {
invoice: [],
},
然后在我的 store.js 中，我的操作中有以下内容：
actions: {
invoiceCollection({commit}) {
database.collection('invoices')
.get()
.then((querySnapShot) => {
querySnapShot.forEach((doc) => {
const curInvData = doc.data();
commit('invoice', curInvData);
})
})
}
},
此操作从 firestore 获取我需要的数据，应该如下所示。
clientDetails: "Adress"
dateCreated: "September 15th 2019"
invoice: Array(2)
invoiceSubTotal: "R 167,50"
invoiceTotal: (...)
itemPaid: (...)
userId: (...)
userName: (...)
然后我改变我的状态（store.js）：
mutations: {
invoice: (state, payload) => state.invoice = payload,
},
然后使用 getter (store.js)：
getters: {
// Get Invoice data from state
invoice: state => {
return state.invoice
},
},
然后我将 mapGetters 导入我的组件 (EditInvoice.vue) ...使用 ...mapGetters(['invoice']), 遍历我的计算属性下的 getter
然后使用带有控制台日志的简单函数并使用生命周期挂钩。
created() {
this.currentInvoice();
},
methods: {
...mapActions(['invoiceCollection']),
currentInvoice() {
console.log(this.invoice)
},
我对编程很陌生，我想知道为什么我的 getter 和其他所有东西总是返回一个空的观察者
[__ob__: Observer]
length: 0
__ob__: Observer {value: Array(0), dep: Dep, vmCount: 0}
__proto__: Array
在最初的几次尝试中。然后在 ProfilePage.vue 中点击几下编辑按钮后，最终显示正确的数据
我一直在寻找同样的问题并找到了几个案例，但没有一个对我有帮助。这是我剥离的简化版本。我只想知道为什么我的状态不是持久的。数据就在那里，只是没有在第一页或第二页加载时显示。
任何帮助将不胜感激。
【问题讨论】：
-
这可能是因为您来自 firebase 的数据尚未加载。尝试在组件的计算部分中使用 ...mapState 而不是 ...mapGetter。
-
嗨 PeeJee。感谢你的回复。但我都试过了。正如我所说，这是一个非常简单的布局，因为我已经没有想法了。我没有改变这样一个事实，即第一次干净加载，无论它是直接来自状态还是 getter 总是在第一次甚至第二次加载时返回空。我的动作是异步的，我用我的突变来改变我的状态。但为什么我的状态总是 [ob: Observer] 我什至在加载任何内容之前在我的 App.vue 中将其注销，但我仍然返回 [ob: Observer]
-
没问题。如果您将操作中的提交更改为以下内容会怎样：commit('invoice', snap.forEach(doc => doc.data()))
-
这给了我不确定性。真正让我难以置信的是，如果我在我的承诺中使用 console.log doc.data()，我的操作中的数据总是正确显示。它需要一秒钟左右，但它显示...
-
是否可以制作 JSFiddle 或向我发送 repo？这种方式很难调试。