Ggtcf

My vue component doesn´t change a child component when the state of vuex changes.

I have a list of slots for items and want to render items depending on a vuex state variable.

When you click on a "item"-component it sets the selectedItem state variable. Another component watches this variable and sets equippedItems variable with new data.

But when I try to change an item it doesn't show up, even though the state seems to change in Vuex.

I have set up the vuex store like that:

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

Then I have a component that sets the items according to the equippedItems variable

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>

Then there is the item component which sets the vuex variable selectedItem on click.

import mapActions from 'vuex';

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

It renders fine the first time when the page is loading, but doesn't change the new passed item to the item-component.

Thanks in advance

There a couple mistakes in your code:

1- I couldn't identify where you call/trigger an event to your selectedItem() method in your component.

2-(This is an extra) If you want to append objects to an array injavascript you just use array.push(odject), so i would suggest you to change your changeEquippedItems mutation to:

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