Я создаю систему уведомлений, и она вроде как работает, но вроде нет. У меня есть следующая функция композиции
const data = reactive({
notifications: []
});
let notificationKey = 0;
export const useNotification = () => {
const visibleNotifications = computed(() => {
return data.notifications.slice().reverse();
});
const add = (notification: INotification) => {
notification.key = notificationKey++;
notification.type = notification.type ?? 'success';
notification.icon = iconObject[notification.type];
notification.iconColor = iconColorObject[notification.type];
data.notifications.push(notification);
notificationTimer[notification.key] = new Timer(() => {
remove(notification.key);
}, notificationTimeout);
};
const remove = (notificationKey: number) => {
const notificationIndex = data.notifications.findIndex(notification => notification?.key === notificationKey);
if (notificationTimer[notificationKey] !== undefined) {
notificationTimer[notificationKey].stop();
}
if (notificationIndex > -1) {
data.notifications.splice(notificationIndex, 1);
}
};
const click = (notification: INotification) => {
/// ... click code
};
return {
visibleNotifications,
add,
remove,
click
};
};
Это работает (немного упрощено). Теперь у меня есть две точки входа в Webpack. В одной точке входа (auth) у меня есть следующий код для загрузки компонента Vue для отображения уведомления
Promise.all([
import(/* webpackChunkName: "Vue"*/ 'vue'),
import(/* webpackChunkName: "@vue/composition-api"*/ '@vue/composition-api'),
import(/* webpackChunkName: "Notifications"*/'components/Notifications.vue')
]).then((
[
{ default: Vue },
{ default: VueCompositionAPI },
{ default: Notifications },
]) => {
Vue.use(VueCompositionAPI);
new Vue({
render: h => h(Notifications)
}).$mount('.notification-outer);
});
Теперь все работает, и я добавляю туда следующий код
import { useNotification } from 'modules/compositionFunctions/notifications';
useNotification().add({
title : 'Error',
message: 'This is an error notification',
type : 'error',
});
Затем уведомление отображается как ожидалось Все это происходит внутри точки входа аутентификации, и все это машинописный текст.
Теперь, если я перейду ко второй точке входа (редактору) и в существующем файле JS введите следующий код
import(/* webpackChunkName: "useNotification"*/ 'modules/compositionFunctions/notifications').then(({ useNotification }) => {
useNotification().add({
title : 'Block Deleted',
message : 'The block has been deleted',
buttonText: 'Undo',
buttonFunction () {
undoDelete();
}
});
});
Тогда это работает, и под этим я подразумеваю, что работает весь код из функции useNotification. Метод добавления добавит его (если я выйду из консоли с реактивным свойством), и через 15000 мс произойдет удаление методов, и я могу добавить журналы, чтобы показать это. ОДНАКО компонент Vue никогда не видит этого изменения. Если я добавлю часы в компонент Vue и выйду из системы по мере продвижения, первое уведомление (изображение выше) внесет JS-журнал в консоль, однако при добавлении его из точки входа редактора он ничего не сделает.
Компонент Vue JS
import { useNotification } from 'modules/compositionFunctions/notifications';
import { defineComponent } from '@vue/composition-api';
export default defineComponent({
name : 'Notifications',
setup () {
const { visibleNotifications, remove, click: notificationClick } = useNotification();
return {
visibleNotifications,
remove,
notificationClick,
};
},
watch: {
visibleNotifications: (v) => {
console.log(v);
}
}
});
ПОЖАЛУЙСТА, кто-нибудь, подскажите, что они могут помочь? Это начинает делать мою голову в ...
TIA
remove
? - person Krzysztof Kaczyński   schedule 02.09.2020data
contains есть все, когда я выхожу из системы. Все равно добавил это в приведенное выше - person LeeR   schedule 02.09.2020Notifications
действительно где-то отображается, когда вы используете точку входа редактора? Кроме того, не могли бы вы попробовать поместить ведение журнала консоли прямо в верхнюю частьnotifications.ts
, чтобы подтвердить, что файл загружается только один раз (чтобы подтвердить, чтоdata.notifications
уникален). Предполагая, что ни одна из этих проблем не является проблемой, не могли бы вы разместить урезанную, собираемую, работающую версию вашего приложения на GitHub, чтобы мы могли попробовать ее сами? - person skirtle   schedule 03.09.2020visible
, чтобы определять, показывать ли уведомление или нет. Я просто добавляю или удаляю уведомление из массива, чтобы обеспечить реактивность - person LeeR   schedule 04.09.2020npm ci
, затемnpm start
, а затем откроетеdist/index.html
в браузере, все будет в порядке. Интересно, что в этом случае у меня есть код как в entry1, так и в entry2, и иногда 1 будет работать, а 2 нет, или 2 будет работать, а 1 нет, но я не могу найти причину того, что происходит - person LeeR   schedule 04.09.2020