Vuex

Question

我碰壁了，现在没有你的帮助是无法克服的。我花了好几天时间试图了解突变和动作，但我遇到的这个特殊情况似乎不适用于在线教程，而且这里的答案适用于我的不同场景。所以这里是：

设置： - 项目使用 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 - 根据组件的当前索引更改值并将值传递给其他组件

Vuex - changing value based on component's current index and passing the value to other components

vue.js

vuejs2