Javascript I'；我正在尝试重新制作Vuex'；s使用多个组件启动项目，但可以'；我不知道如何从组件调用根方法

讨论中的项目简单明了，但为了学习，我将其分解为索引和4个js文件（父文件、子文件、根文件和存储文件），我无法理解如何在子文件中调用递增和递减根方法，而不使用元素中的提交，或者陷入错误做法或反模式，例如在元素内部使用道具或

this.$root

这是我的密码：

index.html:

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

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

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

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

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

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')
        } 
    }
})

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
        }
      }

store.js:

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

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

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

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

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

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')
        } 
    }
})

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
        }
      }

parent.js:

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

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

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

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

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

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')
        } 
    }
})

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
        }
      }

Vue.component（'parent'{
模板：
`
Numero:{{$store.state.Numero}
`
})

child.js:

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

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

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

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

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

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')
        } 
    }
})

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
        }
      }

Vue.component（'child'{
模板：
`
+
-
数字：{{Numero}
`,
计算：{
数字（）{
返回存储区.state.numero
}
}

---

我读到我应该使用事件，但我不确定如何使用按钮。不用说，我对JavaScript、Vue和Vuex非常陌生。

您可以使用实例方法事件，例如：

root.js:

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

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

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

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

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

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')
        } 
    }
})

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
        }
      }

child.js:

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

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

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

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

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

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')
        } 
    }
})

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
        }
      }

这是一个发出事件的组件：

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) {
      ...
    });
  }
});

正如您可能看到的，它以相同的方式完成，唯一的区别是-您使用的是单独的实例，用于通信目的

---

我希望它能帮上忙！谢谢你的回复。不过代码比预期的要多得多。第一种解决方案非常复杂，第二种有点混乱，我见过这样的解决方案，但我没有意识到如何在我的案例中实现它。@JoaquinLeon我希望它能帮上忙。第二种方法的唯一优势（据我所知）即使你在每页使用不同的

Vue

实例，它也会起作用。好吧，如果我能提供帮助，请告诉我。我放弃了根方法，改为使用MapTranslations路径。它看起来更干净、更简单，不过我相信我以后将不得不求助于你的一些建议。