Вью состояния массива обновления, используя состав АПИ


Вью состояния массива обновления, используя состав АПИ

24.09.2020 08:51:15 Просмотров 35 Источник

Я пытаюсь создать какое-то состояние с помощью 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, но у меня не было успеха. Я новичок в этой штуке API композиции, и мне было интересно, что я упускаю.

У вопроса есть решение - Посмотреть?

Ответы - Вью состояния массива обновления, используя состав АПИ / Vue update array state using the composition api

Является ответом!
vollucris

26.09.2020 11:46:55

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

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

Помочь в развитии проекта:
Закрыть X