Pokedex: Actualizar Vue de la 버전 2 a la 3

Laravel의 이전 버전은 8.x에서 9.27로, Vue의 실제 버전은 9.27로 변경되었습니다.

La publicación anterior la puedes consultar aquí:

Actualmente la versión 3 de Vue, viene con "composition API", la cual en terminos generales, es una funcionalidad que hace que tu app de Vue2 no se rompa con lo nuevo del Vue3.

Uno de los primeros cambios que podremos notar, será como se define la instancia de Vue.

A continuación, actualizaremos a la versión 3, configurando lo básico.

구성

처음에는 다음과 같이 "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"
}

Como podemos observar, actualizamos varias versiones de paquetes existentes, y agregamos otros paquetes que nos sirven para usar Vue 3.
Vue에는 "vue"및 "vue-loader", "vue-template-compiler", "@vue/compiler-sfc"및 "vuex"의 집합이 포함됩니다.

Una vez que hemos realizado lo anteriormente descrito, borraremos los siguientes archivos:

node_modules

public/css/app.css

public/js/app.js(todo lo que contenga esta carpeta)

Una vez borrados los archivos tendremos que ejecutar lo siguiente:

npm install

Si todo se realizó de forma correcta, ejecutamos el siguiente comando:

npm run dev

자바스크립트 입력에 대한 펀토 구성

Como se mencionó anteriromente, la creación de la instancia de Vue3 es un poco diferente a la versión anterior, por tal motivo tendremos que modificar el punto de entrada de la app.

Para lograrlo, modificaremos el archivo resources/js/app.js con lo siguiente:

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"는 새로운 앱 생성과 3번 버전의 "createApp"사용을 위한 새로운 버전으로 구성되어 있습니다.

구성 요소 수정

Otro de los cambios en la version 3 de Vue, es la definición de componentes, aunque en teoría no debe afectar si los dejamos así, vamos a modificar uno de ellos, para ver la diferencia.

Modificamos el componente "PokedexNav"con lo Siguiente:

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

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

"defineComponent"기능은 프로그램의 새로운 구성 요소를 구성하는 데 사용되며 이전에 간단하게 수출할 수 있습니다.

스토어 수정

La llamada al "store"definida por "Vuex"también cambio, aquí antes inyectábamos la store definida global en el objeto del componente, ahora tendremos que usarla en el "setup"del componente.

Definimos nuestra store modificando el archivo "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

Usamos la función "createStore"para definir y configurar nuestra "store". 이전에 "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>

"store"는 "useStore"및 "setup()"기능의 정의에 따라 "app.js"아카이브에 정의된 잘못된 구성입니다. Después definimos nuestra propiedad "computed"(otra función de "vue") y le pasamos el "state"del store a esta propiedad.

Cabe destacar que aunque tenemos definido el store en el setup, todavía funciona la llamada al store de la version 2 con "this.$store".

Al terminar de realizar todo lo anteriormente descrito, ya podremos ejecutar nuestro con Vue actualizado a la version 3.

Si deseas visualizar la diferencia de los archivos cuando se actualizó la versión de Vue, la puedes Consultar en el siguiente PR:

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