Я пытаюсь переделать проект Vuex Getting Started, используя несколько компонентов, но не могу понять, как вызывать root методы из компонентов.

Question

Рассматриваемый проект , этот , простой и понятный, но ради обучения я разбил его на индекс и 4 js файла (родительский, дочерний, root и хранилище) и я не могу понять, как вызывать методы приращения и убывания root в дочернем элементе, не используя коммиты внутри элементов, или не впадая в плохие практики или анти-паттерны, такие как использование реквизита или this.$root внутри элементов.

Вот мой код:

index. html:

<div id="app">
        <parent></parent>
</div>

root. js:

let vm = new Vue({
    el: '#app',
    store,
    methods:{
        increment(){
            store.commit('incrementar')
        },
        decrement(){
            store.commit('decrementar')
        } 
    }
})

store. js:

const store = new Vuex.Store({
    state:{
        numero: 11
    },
    mutations:{
        incrementar(state){
            state.numero++
        },
        decrementar(state){
            state.numero--
        }
    }
})

parent. js:

Vue.component('parent',{
    template:
    `
    <div>
        <h1>Numero: {{$store.state.numero}}</h1>
        <child></child>
    </div>
    `
})

child. js:

Vue.component('child',{
    template:
    `
    <div>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <h1>Numero: {{numero}}</h1>
    </div>
    `,
    computed: {
        numero() {
            return store.state.numero
        }
      }

Я читал, что должен использовать события, но я не совсем уверен, как с кнопками. Само собой разумеется, что я довольно новичок в JavaScript, Vue и Vuex.

Answer 1

Вы можете использовать события методов экземпляра, как это описано здесь , например:

root. js:

let vm = new Vue({
    el: '#app',
    store,
  mounted () {
    let self = this
    self.$root.$on('FancyEventName', self.HandleFancyEvent)
  },
  beforeDestroy () {
    let self = this
    self.$root.$off('FancyEventName', self.HandleFancyEvent)
  },
  methods: {
    HandleFancyEvent (arg) {
      let self = this
      if(arg === true){
       self.increment()
     } else{
       self.decrement()
     }
    },
    methods:{
        increment(){
            store.commit('incrementar')
        },
        decrement(){
            store.commit('decrementar')
        } 
    }
})

child. js:

Vue.component('child',{
    template:
    `
    <div>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <h1>Numero: {{numero}}</h1>
    </div>
    `,
    methods:{
        increment(){
            let self = this
            self.$root.$emit('FancyEventName', true)
        },
        decrement(){
            let self = this
            self.$root.$emit('FancyEventName', false)
        } 
    }
    computed: {
        numero() {
            return store.state.numero
        }
      }

Это будет прекрасно работать. Кроме того, я видел, как некоторые люди использовали подход, использующий отдельный экземпляр для того же.

Вы можете создать «EventBus» и использовать его так:

// event-bus.js
import Vue from 'vue';
const EventBus = new Vue();
export default EventBus;

И здесь это компонент, который генерирует событие:

import Vue from 'vue';
import EventBus from './event-bus';
Vue.component('component-a', {
  ...
  methods: {
    emitMethod () {
       EventBus.$emit('EVENT_NAME', payLoad);
    }
  }
});

И второй компонент, который реагирует на это событие:

// component-b.js
import Vue from 'vue';
import EventBus from './event-bus';
Vue.component(‘component-b’, {
  ...
  mounted () {
    EventBus.$on(‘EVENT_NAME’, function (payLoad) {
      ...
    });
  }
});

Как вы можете видеть, он делает это так же, единственное отличие is - вы используете отдельный экземпляр для связи.

Надеюсь, это поможет! ?