WordPress Interactivity API中上下文与Getter方法使用问题

问题核心 #

你尝试直接在store的context配置中定义getter属性但无法生效，原因是Interactivity API的context配置仅用于设置实例上下文的默认初始值——它会被浅复制到每个组件实例的context对象中，而访问器属性（getter）不会被复制到新实例上，因此直接定义的getter无法被实例context继承。

解决方案 #

方案1：封装计算逻辑为工具函数（推荐）

将resultMessage的计算逻辑封装成独立函数，在模板或action中直接调用，无需在context中定义getter：

import { store, getContext } from '@wordpress/interactivity';

// 封装结果消息计算逻辑
const getResultMessage = (context) => {
  const isSolved = context.selectedAnswer === context.quiz.correctAnswer;
  return isSolved ? 'Correct! Well done!' : 'Sorry, that\'s incorrect. Try again!';
};

const { actions } = store('content-quiz', {
  actions: {
    selectAnswer: (event) => {
      const context = getContext();
      context.isSubmitted = true;
      context.selectedAnswer = event.target.value;
      // 无需手动赋值resultMessage，模板中直接调用函数即可
    },
  },
});

在你的Interactivity模板（如PHP模板）中，可以这样使用：

<div data-wp-text="() => getResultMessage(getContext())"></div>

方案2：动态给context添加Getter属性

如果需要在context对象上直接通过context.resultMessage访问计算值，可以在组件初始化时，用Object.defineProperty给实例context添加访问器属性：

import { store, getContext } from '@wordpress/interactivity';

const { actions } = store('content-quiz', {
  actions: {
    // 组件初始化时添加getter
    setup: () => {
      const context = getContext();
      Object.defineProperty(context, 'resultMessage', {
        get() {
          const isSolved = this.selectedAnswer === this.quiz.correctAnswer;
          return isSolved ? 'Correct! Well done!' : 'Sorry, that\'s incorrect. Try again!';
        },
        configurable: true, // 允许后续修改该属性
        enumerable: true // 使属性可被遍历（可选）
      });
    },
    selectAnswer: (event) => {
      const context = getContext();
      context.isSubmitted = true;
      context.selectedAnswer = event.target.value;
      // getter会自动计算最新的resultMessage
    },
  },
});

补充说明 #

你倾向于将非全局本地值放在context中的实践是完全正确的：Interactivity API的state是全局共享状态，而context是组件实例级别的本地状态，仅对当前组件及其子组件可见，适合存储无需跨组件共享的数据。

内容的提问来源于stack exchange，提问作者Byeongin Yoon