Question

我有一个值存储在Firebase中。

{
  name: 'sheep',
  total: 0
}

我通过调用Firebase的操作将其同步到Vuex状态的值。

loadedCounter ({ commit }) {
  commit('setLoading', true)
  firebase.database().ref('animals').on('value', (snapshot) => {
    let counter = []
    let obj = snapshot.val()
    for (let key in obj) {
      counter.push({
        name: obj[key].name,
        total: obj[key].total
      })
    }
    commit('setLoadedCounter', test)
    commit('setLoading', false)
  })
},

然后，我在Vue组件中使用computed属性来获取值。吸气剂正在工作。

computed: {
sheepCounter: {
  get () {
    let test = this.$store.getters.getSheep
    return test.total
  },
  set (value) {
    this.$store.commit('updateSheep', value)
  }
}

但是，安装程序会出错。我在控制台中收到此错误：

[vuex]未知突变类型：updateSheep

我认为问题在于该集合只能引用一个突变，而updateSheep是action。但是据我了解，它必须是一个动作，因为它是异步代码。

updateSheep ({commit}, payload) {
  firebase.database().ref('animals').child('sheep').update({total: payload})
},

如何使用与Firebase同步的计算机属性集来设置数据？

Answer 1

我能够通过分派动作来解决此问题。我正在尝试执行一项操作。调度是针对操作的：

this.$store.dispatch('updateSheep', value)

不是

this.$store.commit('updateSheep', value)

通过Vue计算设置器调用Vuex Action

1 个答案: