[英]Vue component doesn´t rerender after vuex state change
My vue component doesn´t change a child component when the state of vuex changes.当 vuex 的状态发生变化时,我的 vue 组件不会更改子组件。
I have a list of slots for items and want to render items depending on a vuex state variable.我有一个项目插槽列表,并希望根据 vuex 状态变量呈现项目。
When you click on a "item"-component it sets the selectedItem
state variable.当您单击“项目”组件时,它会设置selectedItem
状态变量。 Another component watches this variable and sets equippedItems
variable with new data.另一个组件监视此变量并使用新数据设置equippedItems
变量。
But when I try to change an item it doesn't show up, even though the state seems to change in Vuex.但是当我尝试更改一个项目时,它没有显示出来,即使状态似乎在 Vuex 中发生了变化。
I have set up the vuex store like that:我已经设置了这样的 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
}
Then I have a component that sets the items according to the equippedItems
variable然后我有一个组件,根据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>
Then there is the item component which sets the vuex variable selectedItem
on click.然后是 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);
}
}
}
}
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. 1- 我无法确定您在哪里调用/触发组件中selectedItem()
方法的事件。
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: 2-(这是一个额外的)如果你想在javascript中将对象附加到数组中,你只需使用array.push(odject)
,所以我建议你将你的changeEquippedItems
突变更改为:
changeEquippedItems: (state, parameters) => {
state.equippedItems.push(parameters);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.