Actualizado App.vue a Vue3

src/App.vue

@@ -19,32 +19,52 @@ div.contenedor(:style="anchoBarraLateral")
 </template>
 
 <script lang="coffee">
+    import {ref, computed} from "vue"
+    import {useStore} from "vuex"
     import barraLateral from "./components/App/barra-lateral.vue"
     import YAML from "yaml"
 
-    export default
+    setup = =>
-        name: "App"
+        store = useStore()
-        components: { barraLateral }
+
-        data: ->
+        barraLateralOculta = ref false
-            barraLateralOculta: false
+        alto = computed (=> store.state.altoPantalla)
-        computed:
+        ancho = computed (=> store.state.anchoPantalla)
-            alto: -> @$store.state.altoPantalla
+        año = computed (=> store.state.año)
-            ancho: -> @$store.state.anchoPantalla
+        periodo = computed (=> store.state.periodo)
-            año: -> @$store.state.año
+        facultad = computed (=> store.state.facultad)
-            periodo: -> @$store.state.periodo
+        escuela = computed (=> store.state.escuela)
-            facultad: -> @$store.state.facultad
+        anchoBarraLateral = computed (=>
-            escuela: -> @$store.state.escuela
+            if barraLateralOculta.value
-            anchoBarraLateral: ->
+                {gridTemplateColumns: "4rem auto"}
-                if @barraLateralOculta then { gridTemplateColumns: "4rem auto" }
+            else
-                else { gridTemplateColumns: "20rem auto" }
+                {gridTemplateColumns: "20rem auto"}
-        methods:
+        )
-            cambiarEstadoBarraLateral: ->
+
-                @barraLateralOculta = !@barraLateralOculta
+        cambiarEstadoBarraLateral = => barraLateralOculta.value = !barraLateralOculta.value
-        created: ->
+
-            vm = this
+        setTimeout (=>
-            resRaw = await fetch "/horarios/#{@año}_#{@periodo}_#{@facultad}_#{@escuela}.yaml"
+            resRaw = await fetch "/horarios/#{año}_#{periodo}_#{facultad}_#{escuela}.yaml"
             res = YAML.parse await resRaw.text()
-            @$store.commit "cambiarDatos", res
+            store.commit "cambiarDatos", res
+        ), 0
+
+        {
+            barraLateralOculta
+            alto
+            ancho
+            año
+            periodo
+            facultad
+            escuela
+            anchoBarraLateral
+        }
+
+    export default {
+        name: "App"
+        components: {barraLateral}
+        setup
+    }
 
 #
 </script>