Pokedex: Обновление Vue с версии 2 до версии 3

Ранее мы обновили версию Laravel с 8.x до 9.27, теперь пришло время обновить версию Vue.

Предыдущее сообщение можно найти здесь:

https://dev.to/krsrk/pokedex-update-laravel-from-8x-to-9x-4018

В настоящее время Vue версии 3 поставляется с «композиционным API», который, в общих чертах, является функцией, позволяющей вашему приложению Vue2 не ломаться с новым Vue3.

Одно из первых изменений, которое мы заметим, это то, как определяется экземпляр Vue.

Далее мы перейдем на версию 3, настроив основные параметры.

Конфигурация

Сначала нам нужно изменить файл «package.json» следующим образом:

"devDependencies": {
     "@vue/compiler-sfc": "^3.2.38",
     "axios": "^0.21.4",
     "css-loader": "^6.7.1",
     "laravel-mix": "^6.0.0-beta.17",
     "postcss": "^8.1.14",
     "resolve-url-loader": "^3.1.2",
     "sass": "^1.32.11",
     "sass-loader": "^11.0.1",
     "vue": "^3.2.36",
     "vue-loader": "^17.0.0"
},
"dependencies": {
     "tailwindcss": "^2.2.4",
     "vuex": "^4.0.0"
}

Как мы видим, мы обновили несколько версий существующих пакетов, а также добавили другие пакеты, которые помогают нам использовать Vue 3.
В случае с Vue мы обновляем пакеты «vue» и «vue-loader», удаляем «vue-template-compiler», добавляем «@vue/compiler-sfc» и обновляем «vuex».

После выполнения вышеуказанных действий мы удалим следующие файлы:

• узловые модули
• public/css/app.css
• public/js/app.js (все в этой папке)

После удаления файлов нам нужно будет выполнить следующее:

npm install

Если все было сделано правильно, выполняем следующую команду:

npm run dev

Конфигурация точки входа Javascript

Как уже упоминалось, создание экземпляра Vue3 немного отличается от предыдущей версии, поэтому нам придется изменить точку входа в приложение.

Для этого мы изменим файл resources/js/app.js следующим образом:

require('./bootstrap');
import { createApp } from 'vue';
import store from './store/store';

import PokedexNav from "./components/PokedexNav.vue";
import PokedexContent from "./components/PokedexContent.vue";
import PokedexFooter from "./components/PokedexFooter.vue";

createApp({
    components: {
        'pokedex-nav': PokedexNav,
        'pokedex-content': PokedexContent,
        'pokedex-footer': PokedexFooter,
    }
}).use(store).mount('#app')

Разница в том, что раньше мы использовали «new Vue» для создания нашего приложения, а в этой версии мы должны использовать метод «createApp» из версии 3.

Модификация компонентов

Еще одним изменением в версии 3 Vue стало определение компонентов, хотя теоретически это не должно повлиять, если мы оставим их в таком виде, мы изменим один из них, чтобы увидеть разницу.

Мы изменяем компонент «PokedexNav» следующим образом:

<script>
import { defineComponent } from 'vue';

export default defineComponent({
    name: "PokedexNav"
});
</script>

Мы используем функцию «defineComponent» для настройки и программирования нашего компонента, ранее мы просто экспортировали его как объект.

Изменение магазина

Вызов «store», определенного «Vuex», также изменился, здесь раньше мы инжектировали глобальный определенный store в объект компонента, теперь мы должны будем использовать его в «setup» компонента.

Мы определяем наш магазин, изменяя файл «store.js».

import { createStore } from 'vuex';
import state from "./state"
import getters from "./getters"
import mutations from "./mutations"
import actions from "./actions"

const store = createStore({
    state,
    getters,
    mutations,
    actions,
})

export default store

Мы используем функцию «createStore» для определения и настройки нашего магазина. Ранее в «app.js» мы настроили его в функции «createApp» нашей точки входа.

Теперь мы изменим компонент «PokedexContent» следующим образом:

<script>
import { defineComponent, computed } from 'vue';
import { useStore } from 'vuex';

import TheItemData from "./TheItemData";
import TheSearchBox from "./TheSearchBox";

export default defineComponent({
    name: "PokedexContent",
    components: {
        'the-item-data': TheItemData,
        'the-search-box': TheSearchBox,
    },
    created() {
        this.$store.dispatch('getPokemonsData')
    },
    setup() {
        const store = useStore();
        let items = computed(function () {
            return store.state.pokemonsWithSearchFilter;
        });

        return {
            store,
            items,
        }
    }
})
</script>

Магазин» был определен с помощью функции «useStore» в «setup()», вся конфигурация магазина была определена в файле «app.js». Затем мы определяем наше свойство «computed» (еще одна функция «vue») и передаем этому свойству «состояние» магазина.

Обратите внимание, что даже если мы определили магазин в настройке, вызов магазина версии 2 с помощью «this.$store» все равно работает.

Выполнив все вышеперечисленное, мы можем запустить наш Pokedex с Vue, обновленным до версии 3.

Если вы хотите увидеть разницу в файлах, когда версия Vue была обновлена, вы можете проверить следующий PR:

https://github.com/krsrk/pokedex-laravel/pull/7