Почему API интерактивности WordPress нуждается в контексте?
WordPress Interactive API был официально выпущен в версии WordPress 6.5. Изучая эту новую функцию, я нахожу ее интригующей, но некоторые аспекты меня несколько озадачивают, особенно в отношении использования контекста.
Мой главный вопрос: в чем смысл использования контекста в дополнение к состоянию? Не будет ли достаточно использовать только состояние?
Я понимаю, что контекст должен быть локальным, а состояние — глобальным. Однако оказывается, что мы можем получить доступ к контексту, используя пространства имен, как показано в этом примере:
import { getContext } from "@wordpress/interactivity";
const otherPluginContext = getContext( "otherPlugin" );
Более того, кажется возможным создавать частные состояния, как показано здесь:
const { state } = store("myPlugin/private", {
state: {
messages: [ "private message" ]
}
},
{ lock: true }
);
// The following call throws an Error!
store( "myPlugin/private", { /* store part */ } );
Учитывая эти возможности, мне интересно узнать о конкретных преимуществах и вариантах использования контекста в WordPress Interactive API. Может ли кто-нибудь прояснить различия между состоянием и контекстом и объяснить сценарии, в которых использование контекста было бы предпочтительнее, чем использование только состояния?
Ответы 1
Допустим, у вас есть три одинаковых блока на странице, каждый из которых использует API интерактивности. В этом сценарии они будут использовать одно и то же хранилище, но иметь разные индивидуальные свойства, например идентификатор.
<button
data-wp-interactive = "namespace/storename"
data-wp-context='{"id":1}'
data-wp-on--click = "actions.toggle"
>Click me</button>
Теперь предположим, что мы хотим обновить глобальное состояние, добавив или удалив блок, по которому мы щелкнули. С помощью getContext() мы можем выяснить, какой из блоков вызвал действие, и прочитать контекст этого блока, чтобы использовать его с глобальным состоянием.
const { state } = store('namespace/storename', {
state: {
clickedBlocks: []
},
actions: {
toggle: () => {
const context = getContext();
const index = state.clickedBlocks.findIndex(
(block) => block === context.id
);
if (index === -1) {
state.clickedBlocks = [...state.clickedBlocks, context.id];
} else {
state.clickedBlocks = state.clickedBlocks.toSpliced(index, 1);
}
}
}
});
Без getContext() мы бы не знали, какой из блоков вызвал действие toggle.
Ага! Теперь я понимаю. Используя getContext(), нам не нужно знать конкретное название штата. Это означает, что нам не нужно передавать имя состояния в мир JavaScript. Функция getContext() автоматически находит для нас локальный контекст. Однако если мы используем три отдельных состояния, нам нужно будет передать пространство имен каждого состояния в соответствующий файл view.js (в мире JavaScript). Потому что мы используем один и тот же блок. То же самое, но с тремя дублированными блоками.
Не могли бы вы также проверить этот вопрос? stackoverflow.com/questions/78733862/…
Пожалуйста, отметьте ответ как принятый, если он отвечает на вопрос. Я посмотрю на твой следующий вопрос
Спасибо за ваш ответ. Однако я считаю, что мы можем использовать три отдельных состояния вместо одного общего состояния.