Question

我已经撞墙了，现在没有你的帮助就无法克服它。我已经花了好几天试图了解突变和行动，但这个特殊情况我似乎并不适用于在线教程，这里的答案也适用于我的不同场景。所以这里：

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

我正在努力实现这个目标： - 当我单击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>

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

}

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
state: {
    showBaseIndex: 1,
    base : [
        { name: 'Dünner Italienisch', class: 'pizza-canvas--base-italienisch', id: 1 },
        { name: 'Dünner Italienisch - Vollkorn', class: 'pizza-canvas--base-italienisch--vollkorn', id: 2 },
        { name: 'Dicker Amerikanisch', class: 'pizza-canvas--base-amerikanisch', id: 3 },
        { name: 'Dicker Amerikanisch / Chili-Käse-Rand', class: 'pizza-canvas--base-amerikanisch--chilli-kaese-rand', id: 4 },
        { name: 'Dicker Amerikanisch / Käse-Rand', class: 'pizza-canvas--base-amerikanisch--kaese-rand', id: 5 }
    ],
},
getters: {
    //
},
mutations: {
    baseLayer (state){
        state.showBaseIndex
    }
}, 
});
export default store;

Answer 1

突变是功能，而不是简单的值。您应该检查Vuex guide about mutations，它们非常简单。

你应该做的是以这种方式声明给定的变异，所以它也会接受一个参数：

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});
    }
},

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

1 个答案: