programing

Vuex를 사용한 값 설정

shortcode 2022. 8. 16. 21:35
반응형

Vuex를 사용한 값 설정

저는 Vuex를 배우려고 노력 중입니다.

그래서 내가 원하는 것은number변환을 사용하여 요소를 클릭할 때마다 값이 증가합니다.changeNumber).

let state = {
  counter: 0,
  someOtherValue: 'Text'
}

let changeNumber = {
  increment(state) {
    state.counter += 1
  }
}

let store = new Vuex.Store({
  changeNumber,
  state
})

Vue.component('counter-button', {
  computed: {
    counter() {
      return this.$store.state.counter
    }
  },
  template: `<input :value="$store.state.counter" @click="$store.commit('increment')" type="button">`
})

Vue.component('some-component', {
  computed: {
    someOtherValue() {
      return this.$store.state.someOtherValue
    }
  },
  template: '<div>{{ someOtherValue }}</div>'
})

new Vue({
  el: '#app',
  store,
  template: '<some-component></some-component>',

})

봇에 의해 코드가 수정되어 2개의 에러가 반환됩니다.내 코드에 무슨 문제가 있나요?

Err) clicking on the paragraph causes the number value to change
Err) triggering the changeNumber mutation causes the number value to change

키 아래의 스토어에 돌연변이를 전달해야 합니다.mutations대신changeNumber코드에 주의해 주세요.changeNumber돌연변이가 아니라increment실제 돌연변이입니다.

let mutations = {
  increment(state) {
    state.counter += 1
  }
}

let store = new Vuex.Store({
  mutations,
  state
})

언급URL : https://stackoverflow.com/questions/62092963/setting-values-with-vuex

반응형