时间戳

首页 > 解决方案 > Vue.js 3.0 - 通过组合 API 更改存储属性值时更新组件 UI

javascript - Vue.js 3.0 - 通过组合 API 更改存储属性值时更新组件 UI

问题描述

我正在使用 Vue.js 3.0 编写一个 Vue.js 应用程序。我用它作为学习组合 API 的一种方式。我不清楚的一件事是如何在更新商店值时有条件地更新我的组件 UI。为了演示我的问题，我创建了这个 fiddle。代码在这里详细说明：

JavaScript

const store = {
  state: reactive({
    result = null
  }),
  generateNewValue() {
    this.state.result = Math.floor(Math.random() * 10);
  }
};

const MyApp = {
  setup() {
    return {
    }
  }
}
const myApp = Vue.createApp(MyApp)

myApp.component("banner", 
  { 
    template: '<button @click="onGenerateClick">generate</button>',
    setup(props) {
      console.log('setting up...');
    },
    methods: {
      onGenerateClick() {
        store.generateNewValue();
      }
    }
  }
);

myApp.component("content", {
  template: '<div><span>Content</span><button @click="onGenerateClick">generate</button></div>',
  methods: {
    onGenerateClick() {
      store.generateNewValue();
    }
  }  
});

myApp.mount('#my-vue')

HTML

<div id="my-vue">
  <banner></banner>
  <hr />
  <content></content>
</div>

CSS

.even-banner {
  background-color:navy;
  color: #fff;
}

.even-content {
  background-color:blue;
  color: #fff;
}

.odd-banner {
  background-color:maroon;
  color:#fff;
}

.odd-content {
  background-color:red;
  color:#fff;
}

当我单击“生成”按钮时，会生成一个随机数。如果该数字是偶数，我想将contentdiv 设置为使用evenCSS 类。如果是奇数，我想应用oddCSS 类。我有点卡住了。

我的问题是，我可以在全局存储中成功设置状态值。但是，我不知道如何对组件中的属性值更改做出反应。watchEffect我在我的setup函数中添加了一个, 。但是，这并不能让我访问单个组件本身的状态。我试图在每个组件中找出一种方法来说“嘿，当商店中的这个属性发生变化时，像这样更新 UI。”。

我错过了什么？

标签： javascriptvue.jsvuejs3vue-composition-api

解决方案

您可以使用computed()道具来跟踪状态的值（例如，测试它是否是偶数）：

const MyApp = {
  setup() {
    return {
      isEven: computed(() => store.state.result % 2 === 0)
    }
  }
}

然后，在模板中使用该道具来应用条件类：

<content :class="{ 'even-content': isEven, 'odd-content': !isEven }">

更新的小提琴

推荐阅读