标签: vuexfire

我正在使用 Vuex，并且创建了一个名为 claim 的模块，如下所示：

import to from 'await-to-js'
import { functions } from '@/main'
import Vue from 'vue'

const GENERATE_TX_SUCCESS = 'GENERATE_TX_SUCCESS'
const GENERATE_TX_ERROR = 'GENERATE_TX_ERROR'

export default {
  state: [ ],
  mutations: {
    [GENERATE_TX_SUCCESS] (state, generateTxData) {
      state.push({ transaction: { ...generateTxData } })
    },
    [GENERATE_TX_ERROR] (state, generateTxError) {
      state.push({ transaction: { ...generateTxError } })
    }
  },
  actions: {
    async generateTx ({ commit }, data) {
      const [generateTxError, generateTxData] = await to(functions.httpsCallable('generateTx')(data))
      if (generateTxError) {
        commit(GENERATE_TX_ERROR, generateTxError)
      } else { …

我正在尝试为一个项目设置带有 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 的基本组件： …