Компонент Vue не перерисовывается после изменения состояния vuex

Question

Мой компонент vue не изменяет дочерний компонент при изменении состояния vuex.

У меня есть список слотов для элементов, и я хочу отображать элементы в зависимости от переменной состояния vuex.

Когда вы щелкаете по компоненту «item», он устанавливает переменную состояния selectedItem.Другой компонент отслеживает эту переменную и устанавливает переменную equippedItems с новыми данными.

Но когда я пытаюсь изменить элемент, он не появляется, даже если в Vuex состояние меняется.

Я настроил хранилище vuex следующим образом:

const state = {
    equippedItems:
        [
            {
                name: 'Item 1',
                strength: 3,
                itemType: 1,
                rarity: 3
            },
            {
                name: 'Item 2',
                strength: 40,
                itemType: 2,
                rarity: 2
            }
        ],
    selectedItem: null
}

const getters = {

    getEquippedItems: (state) => state.equippedItems,


    getSelectedItem: (state) => state.selectedItem
}

const mutations = {

    changeSelectedItem: (state, newItem) => {
        state.selectedItem = newItem;
    },

    changeEquippedItems: (state, parameters) => {
        state.equippedItems[parameters[0]] = parameters[1];
    }
}

const actions = {
    setSelectedItem({ commit }, index) {
        commit('changeSelectedItem', index);
    },

    setNewEquipment({ commit }, parameters) {
        commit('changeEquippedItems', parameters);
    }
}

export default {
    state,
    getters,
    actions,
    mutations
}

Затем у меня есть компонент, который устанавливает элементы в соответствии с переменной equippedItems

import { mapGetters, mapActions } from 'vuex';
import Item from '../Item';

export default {
    name: 'equipped-items',
    components: {
        Item
    },
    props: [],
    data() {
        return {
            chooseHead: false,
        }
    },
    computed: {
        ...mapGetters(['getEquippedItems', 'getItems', 'getSelectedItem'])

    },
    methods: {
        ...mapActions(['setNewEquipment']),
        chooseNewHead() {
            this.chooseHead = !this.chooseHead;
        }
    },
    watch: {
        getSelectedItem: function () {
            if (this.chooseHead) {
                this.setNewEquipment([0, this.getSelectedItem]);
            }
        }
    }
}

<section class="equipped-items">

    <div @click="chooseNewHead" class="head equipSlot">
        <Item v-if="getEquippedItems[0]" :passedItem="getEquippedItems[0]" :parent="'equip'"> </Item>
    </div>

    <div class="body equipSlot">
        <Item v-if="getEquippedItems[1]" :passedItem="getEquippedItems[1]"></Item>
    </div>
</section>

Затем есть компонент item, который устанавливает переменную vuex selectedItem при щелчке.

import { mapActions } from 'vuex';

export default {
    name: 'Item',
    props: ['passedItem', 'parent'],
    methods: {
        ...mapActions(['setSelectedItem']),
        selectedItem() {
            if (this.parent != 'equip') {
                this.setSelectedItem(this.passedItem);
            }
        }
    }
}

Он прекрасно воспроизводится при первой загрузке страницы, но не изменяет новый переданный элемент.к пункту-компоненту.

Заранее спасибо

Answer 1

В вашем коде пара ошибок:

1- Я не смог определить, где вы вызываете / запускаете событие для вашего selectedItem() метода в вашем компоненте.

2- (это дополнительно). Если вы хотите добавить объекты в инваскрипт массива, вы просто используете array.push(odject), поэтому я бы предложил вам изменить вашу changeEquippedItems мутацию на:

changeEquippedItems: (state, parameters) => {
        state.equippedItems.push(parameters);
    }