Javascript Vuejs:当数据属性更改时组件不会重新呈现

我有一个类型为Boolean-websiteHasCode的属性，它从存储中获取一个值。我希望在页面中有条件地使用websiteHasCode呈现html（true或false），最初组件A很好（websiteHasCode的正确值）。页面中有一个模式，它是组件a的子组件B，该模式具有更新存储值-isCodeActive的功能。因此，当它更新时，我希望变量websiteHasCode也会更新，并最终更新Dom，因此我使用了一个监视程序，并按照中的方式计算，但它似乎没有更新。谁能帮我解决我的问题

<template> 
  <div>
    <div v-if="websiteHasCode">
          ...............
    </div>
    <div v-else>
          ................
    </div>
  </div>
</template>


<script>
    export default {
        name: "dashboard",
        props: [],
        data() {
            return {
                websiteHasCode: Boolean,
            }
        },
        mounted() {
            this.websiteHasCode = this.$store.state.isCodeActive;
        },
        computed: {
          isCodeActive () {
            return this.$store.state.isCodeActive;
          }
        },
        watch: {
          isCodeActive: {
            handler() {
              console.log(this.websiteHasCode) // returns false
              this.websiteHasCode = this.$store.state.isCodeActive;
              console.log(this.websiteHasCode) // returns true but dom does not re-render
            },
            deep: true
          },
        },
      }
</script>

...............
................
导出默认值{
名称：“仪表板”，
道具：[]，
数据（）{
返回{
websiteHasCode:Boolean，
}
},
安装的（）{
this.websiteHasCode=this.$store.state.isCodeActive；
},
计算：{
isCodeActive（）{
返回此。$store.state.isCodeActive；
}
},
观察：{
iCodeActive：{
handler（）{
console.log（this.websiteHasCode）//返回false
this.websiteHasCode=this.$store.state.isCodeActive；
console.log（this.websiteHasCode）//返回true，但dom不会重新呈现
},
深：是的
},
},
}

---

此外，这是观察状态变化的最佳方法吗？还有更好的方法吗？

除非您想根据isCodeActive的值执行其他操作，否则对计算值使用观察程序是没有意义的，只要直接在您的v中使用计算值即可

<template> 
  <div>
    <div v-if="isCodeActive">
          ...............
    </div>
    <div v-else>
          ................
    </div>
  </div>
</template>
    

<script>
    export default {
        name: "dashboard",
        props: [],
        data() {
            return {
                websiteHasCode: Boolean, // not sure why you're initializing with "Boolean" here, it should be false
            }
        },
        computed: {
          isCodeActive () {
            return this.$store.state.isCodeActive;
          }
        },
      }
</script>

...............
................
导出默认值{
名称：“仪表板”，
道具：[]，
数据（）{
返回{
websiteHasCode:Boolean，//不确定为什么在这里用“Boolean”初始化，它应该是false
}
},
计算：{
isCodeActive（）{
返回此。$store.state.isCodeActive；
}
},
}

---

此外，您正在将websiteHasCode属性初始化为“Boolean”而不是false。可能是vue将此视为真实值，因此不更新布局。

我不确定我是否理解您要执行的操作。也许这会有所帮助。$forceUpdate（）如果没有，如果您将代码添加到CodePen中，会对我有所帮助。直接使用

isCodeActive

怎么样，就像

一样？您还应该初始化

数据中的
websiteHasCode
属性function@Sphinx你的意思是像v-if=“$store.state.isCodeActive”" ? 这是存储中的一个值，对吗？@thefrontendev没问题！我认为Sphinx的意思是，您应该直接使用在
v-if
中声明为
isCodeActive
的计算属性。