돌연변이에 대한 Vuex 도우미 메서드

돌연변이에 대한 Vuex 도우미 메서드

Vuex에는 다음과 같은 돌연변이 개체가 있습니다.

 mutations: {
     someMethod(){
        this.someReusableCode();
     },
     anotherMethod(){
        this.someReusableCode();
     },
     someReusableCode(){
       ...
     }
 }

하지만 에러가 발생하고 있습니다.someReusableCode()정의되어 있지 않습니다.어디서가 가장 잘 정의될까요?someReusableCode()이 방법이 효과가 있을까요?

공유 메서드를 정의할 수 있습니다.store목적(의 뜻을 나타내다Vuex.Store).

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) { this.inc(state) },
    decrement(state) { this.dec(state) }
  }
})

// Shared functions of store
store.inc = state => state.count++;
store.dec = state => state.count--;

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) { this.inc(state) },
    decrement(state) { this.dec(state) }
  }
})

// Shared functions: inc() and dec()
store.inc = state => state.count++
store.dec = state => state.count--

new Vue({
  el: '#app',
  computed: {
    count() {
      return store.state.count
    }
  },
  methods: {
    increment () {
      store.commit('increment')
    },
    decrement () {
      store.commit('decrement')
    }
  }
})

<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"></script>

<div id="app">
  <p>{{ count }}</p>
  <p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </p>
</div>

도우미 메서드는 store.js 내에 보관할 수 있습니다.다음 작업을 수행합니다.

export default new Vuex.Store({
  state: {
    count: 0
  },
  helperMethods: {
    inc: (input, increment) => input + increment
  mutations: {
    incrementByFive(state) { state.count = this.helperMethods.inc(state.count,5) },
  }
})

언급URL : https://stackoverflow.com/questions/48219418/vuex-helper-methods-for-mutations