Vuejs：数据属性更改时组件不重新渲染

Question

我有一个布尔类型的属性 - websiteHasCode，它从商店中获取一个值。我想有条件地使用 websiteHasCode（true 或 false）在页面中呈现 html，最初组件 A 很好（websiteHasCode 的正确值）。页面中有一个模态，它是组件A的子组件B，模态具有更新存储值的功能-isCodeActive。所以当它更新时我希望变量 websiteHasCode 也更新并最终更新 Dom，所以我使用了一个观察者并按照这个 SO 问题进行了计算，但它似乎没有更新。谁能帮助我在这里做错了什么？

<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>

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

Answer 1

除非你想根据 isCodeActive 的值做其他事情，否则对计算使用观察器是没有意义的，只需在你的 v-if 中直接使用计算，如下所示：<template>&nbsp;&nbsp; <div>&nbsp; &nbsp; <div v-if="isCodeActive">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...............&nbsp; &nbsp; </div>&nbsp; &nbsp; <div v-else>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ................&nbsp; &nbsp; </div>&nbsp; </div></template>&nbsp; &nbsp;&nbsp;<script>&nbsp; &nbsp; export default {&nbsp; &nbsp; &nbsp; &nbsp; name: "dashboard",&nbsp; &nbsp; &nbsp; &nbsp; props: [],&nbsp; &nbsp; &nbsp; &nbsp; data() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; websiteHasCode: Boolean, // not sure why you're initializing with "Boolean" here, it should be false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; computed: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; isCodeActive () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return this.$store.state.isCodeActive;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; }</script>此外，您将 websiteHasCode 属性初始化为“Boolean”而不是 false。可能是 vue 将其视为真实值，因此不会更新布局。