gpt4 book ai didi

vue.js - VueJS : vuex state not updating the component after change

转载 作者:搜寻专家 更新时间:2023-10-30 22:11:23 25 4
gpt4 key购买 nike

<分区>

我创建了一个信息栏,这是一个我想用组件中的信息更新的区域。我将它添加为 App.vue 的子项:

<template>
<div id="app">
<InfoBar /> // my info-bar
<router-view/>
</div>
</template>

能够更新 m <InfoBar />从其他组件,我决定尝试使用 Vuex并使用 mutations更改信息:

Vuex 商店:

   export const store = new Vuex.Store({
state:{
infoBarText: "Text from Vuex store" , // initial text for debugging
},
mutations:{
setInfoBarText(state,text){
state.infoBarText = text;
}
}

信息栏.vue

<template>
<div>
{{infoString}} // the result is always "Text from Vuex store"
</div>
</template>

<script>
export default {
name: "infoBar",
data() {
return {
infoString: this.$store.state.infoBarText
}
}

现在,我想使用来自其他组件的 Vuex 突变来更新文本:

其他.vue:

mounted() {
this.$store.commit("setInfoBarText", "Text from Component");
}

我检查了 stateinfoBarText使用 Vue 开发人员工具并成功更改为 "Text from Component"但它没有更改组件中的文本。

我做错了什么?

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com