为什么vuexfire不是更新状态，而是正确更新ui？

Question

我正试着为一个项目和消防站建立炉火，我想我已经按照文档做了所有的事情。我设法使用vuex/vuexfire从组件中的防火墙中获取数据，并在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的状态，但它不起作用。任何帮助都将不胜感激！

Answer 1

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

希望这对将来的人有帮助！

Answer 2

Vue Devtools

• 设置
  • 新Vuex后端：OFF

​