Блог

Я пытаюсь создать какое-то состояние с помощью composition api в vue 3 со следующим файлом:

 // useNotifications.ts
const state = reactive<Array<Notification>>([]);

export function useNotifications() {
  return {
    state,
    add: (notification: Notification) => {
      state.push(notification);
    },
  };
}
  

Это состояние уведомления считывается и отображается в формате html из приведенного ниже:

 // TheNotifications.vue
setup() {
    const notifications = useNotifications();

    let first = notifications.state[0];

    return {
      first,
    };
  },
  

И уведомления добавляются при некотором событии отправки формы следующим образом:

 // SomeForm.vue
notifications.add({ type: "success", text: "Food added" });
  

Однако TheNotifications никогда не видит изменений при нажатии. Я пробовал несколько разных методов, например, с toRef помощью, но у меня ничего не получилось. Я новичок в этом компоненте composition api, и мне было интересно, чего мне не хватает.

reactive не работает с массивами. Похоже, это ограничение composition api. Вы можете прочитать аналогичное обсуждение здесь .

Используйте ref вместо reactive , он должен работать нормально. Я создал несколько подобных приложений и могу подтвердить, что они работают. Итак, напишите: const state = ref<Array<Notification>>([]); , у вас это будет работать. И, как правило, используйте ref для чего угодно, кроме объектов, это когда вы хотите использовать reactive . Это сложнее, но если вы используете их таким образом, это всегда будет работать.