Vue.js Vuex-根据组件的当前索引更改值并将值传递给其他组件

我撞到墙了，现在没有你的帮助我爬不过去。我花了好几天的时间试图了解突变和行为，但我的这个案例似乎不适用于在线教程，这里的答案也适用于我的不同场景。下面是：

设置： -项目正在使用vuex和store进行数据和状态管理 -目前App.vue有两个子组件：PizzaGenerator.vue和BaseButtons.vue

   <div class="pizza-items-selector pizza-items-selector--dough">
    <div class="pizza-items-selector__items pizza-items-selector__items--dough">
        <div class="sliding-buttons">
            <button v-for="(item, index) in getBase" class="sliding-buttons__button dough-button" :key="index" @click="baseLayer = index"> {{ item.name }}</button>
        </div>
        <button class="buttons-prev-1 prev">prev</button>
        <button class="buttons-next-1 next">next</button>
    </div>
</div>

<script>
import { mapActions, mapMutations } from 'vuex'
export default {
computed:{ 
    getBase(){
        return this.$store.state.base
    },
},
methods:{ 
    ...mapMutations([
        'baseLayer',
    ]),
    baseLayerIndex() {
        this.$store.commit('baseLayer');
    }
},  

我正努力做到这一点： -单击BaseButtons.vue中的特定按钮时，需要为集中管理的showBaseIndex分配索引值。然后，该值可用于另一个组件PizzaGenerator.vue，该组件将反映更改并显示与showBaseIndex的新值匹配的层

请参阅下面的所有两个组件和存储

你能帮我朝正确的方向走吗

PizzaGenerator.vue

<template>
<div class="pizza-generator section" id="screen3" data-anchor="screenThree">
    <ul class="pizza-layers">
        <!-- Display pizzas -->
        <li v-for="(item, index) in getBase" class="pizza-canvas pizza-canvas--base" v-bind:class="item.class"  v-if="$store.state.showBaseIndex == index"></li>
        <!-- END Display pizzas -->
    </ul>

    <div class="pizza-items">
        <app-base-buttons></app-base-buttons>
    </div>
</div>
</template>

<script>
import Base from './pizza-buttons/BaseButtons'
import { mapGetters, mapActions } from 'vuex'

export default {
components: {
    appBaseButtons: Base
},
computed: {
    getBase(){
        return this.$store.state.base
    }
},
methods: mapActions([
    'baseLayer',
]),
}
</script>

---

突变是函数，而不是简单的值。您应该检查Vuex，它们非常简单

您应该以这种方式声明给定的变异，因此它也将接受一个参数：

mutations: {
    baseLayer (state, id){
        state.showBaseIndex = id;
    }
}, 

并在组件中正确提交突变：

    methods:{ 
    ...mapMutations([
        'baseLayer',
    ]),
    baseLayerIndex(index) { // call this at @click on button, giving the index as parameter
        this.$store.commit('baseLayer', index);
    }
    }

这将在存储中设置所需的索引，从该索引开始，您可以使用vuex getter从存储中获取当前的基本索引，如：

getters: {
    getSelectedBase(state){
      return state.base.find(base=>{return base.id === state.showBaseIndex});
    }
},

---

我相信你在PizzaGenerator.vue代码中编写了store.js代码。你能编辑你的问题吗？抱歉，刚刚编辑了PizzaGenerator.vue，我对此相当无知，在发布之前没有检查代码。抱歉，没问题！太好了，阿贝尔，这很有效，最后甚至不用使用getter。主要的学习是记住突变是功能。非常感谢！

getters: {
    getSelectedBase(state){
      return state.base.find(base=>{return base.id === state.showBaseIndex});
    }
},