programing

Vue 계산 세터를 통해 Vuex 작업 호출

prostudy 2022. 4. 20. 21:41
반응형

Vue 계산 세터를 통해 Vuex 작업 호출

난 소방서에 저장되어 있는 카운터에 대한 값을 가지고 있다구.

{
  name: 'sheep',
  total: 0
}

나는 그것을 파이어베이스라고 불리는 액션을 사용하여 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)
  })
},

그리고 나서 나는 a를 사용한다.computed값을 가져올 Vue 구성 요소의 속성.게터가 작동하고 있다.

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

그러나 세터는 오류를 범한다.콘솔에서 다음 오류가 발생하는 경우:

[vuex] 알 수 없는 돌연변이 유형: 업데이트

문제는 세트가 돌연변이만 언급할 수 있고updateSheep이다action하지만 내가 알기로는 비동기 코드라서 액션이 되어야 해.

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

소방서와 동기화하는 컴퓨터 속성 세트를 사용하여 데이터를 설정하는 방법은?

나는 액션을 파견하여 이것을 고칠 수 있었다.나는 행동을 취하려고 했다.발송은 작업:

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

아닌

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

참조URL: https://stackoverflow.com/questions/52523088/call-vuex-action-via-vue-computed-setter

반응형