Децентрализованные приложения VueJS

Недавно у меня была возможность использовать VueJS для децентрализованного приложения. Я хочу сказать, что у меня есть некоторый опыт работы с React и Svelte, но не с Vue, я был как ребенок в новом мире. Единственная причина, по которой я использовал Vue, заключается в том, что вы можете просто поместить тег скрипта в html-файл, и все готово.

Вот что я нашел с помощью vue и ethers.js.

1. Вы не можете использовать data() для хранения поставщика или экземпляра контракта.

Вместо этого вам нужно инициализировать свойство в таком методе, как created(), не объявляя его внутри метода data(). Странно, я знаю!

const App = {
    data() {
        year: 100
    },
    created() {
        this.provider = ...initialize provider
    }
}

2. Используйте вычисленные свойства для создания экземпляра контракта.

Лучший способ, который я нашел для создания экземпляров контрактов, - это использовать вычисленные свойства, инициализация их внутри created() создает бесполезный шаблон. Вычисляемые свойства кэшируются, поэтому вам не нужно беспокоиться о производительности.

const App = {
    computed:
        getTokenContract(){
            return new ethers.Contract(...params)
        }
}

3. Периодическое извлечение данных из блокчейна.

Dapp взаимодействует со смарт-контрактом, развернутым на BSC, обычно у BSC время блокировки составляет 3 секунды, поэтому каждые 3 секунды мне приходилось получать новые данные. Нашел хороший способ периодически получать данные, не создавая утечек памяти.

function onBlockRefresh(callback) {
    let handle = setInterval(callback, 6000);
    window.addEventListener('visibilitychange', () => {
        if (document.visibilityState === 'visible') {
            handle = setInterval(callback, 6000);
        } else {
            clearInterval(handle)
        }
    })
}

Обычно вы использовали бы 3000 в качестве интервала, но я не хотел так сильно запрашивать блокчейн, поэтому вместо этого использовал 6000 в качестве интервала.