为啥 vuexfire 不更新状态而是正确更新 ui？

Posted 2023-02-22

技术标签:

【中文标题】为啥 vuexfire 不更新状态而是正确更新 ui？【英文标题】：Why is vuexfire not updating state but updating the ui correctly?为什么 vuexfire 不更新状态而是正确更新 ui？ 【发布时间】：2019-11-05 21:23:14 【问题描述】：

我正在尝试为一个项目设置带有 firestore 的 vuexfire，我想我已经按照文档完成了所有工作。我设法使用 vuex/vuexfire 从组件内的 firestore 获取数据并在 UI 中正确显示，但是在 devtools 中检查状态时，我发现我的状态没有改变。

我使用 vue-cli 设置了我的项目，并按照 vuexfire 文档和示例制作了一个基本的 todo 应用程序。

这是我的商店文件：

import Vue from 'vue'
import Vuex from 'vuex'
import  vuexfireMutations, firestoreAction  from 'vuexfire'
import  db  from './db'

Vue.use(Vuex)

export default new Vuex.Store(
  state: 
    todos: []
  ,
  mutations: 
    ...vuexfireMutations
  ,
  actions: 
    bindTodos: firestoreAction(( bindFirestoreRef ) => 
      return bindFirestoreRef('todos', db.collection('todos'))
    ),
    unbindTodos: firestoreAction(( unbindFirestoreRef ) => 
      unbindFirestoreRef('todos')
    )
  
)

这是加载和显示 ui 的基本组件：

<template>
  <div>
    <h1>Home</h1>
    <p v-for="todo in todos" :key="todo.id"> todo.name </p>
  </div>
</template>

<script>
import  mapState, mapActions  from 'vuex'

export default 
  name: 'Home',
  computed:  ...mapState(['todos']) ,
  methods:  ...mapActions(['bindTodos']) ,
  created: function () 
    this.bindTodos()
  

</script>

如您所见，UI 显示待办事项，但状态未显示：

我尝试在 devtools 中刷新状态，但它不起作用。任何帮助将不胜感激！

【问题讨论】：

【参考方案1】：

Vue 开发工具

设置新的 Vuex 后端：OFF

【讨论】：

【参考方案2】：

原来是chrome的vue开发工具有问题，我最终决定卸载它并重新安装它，它成功了。状态实际上正在更新，但开发工具没有显示它。

希望这对未来的人有所帮助！

【讨论】：

嗨@yzoldan，你愿意看看另一个Vuexfire问题吗？ ***.com/questions/59903702/…