Dio la casualidad de que comencé a aprender Vue hace un mes con Vue 3. Se anunció previamente que Vue 3 se reescribió a máquina. Para ser honesto, esperaba lo mismo de la nueva versión de Vuex 4 para Vue 3.
Pero por alguna razón, no todo salió como se esperaba. Mirando el repositorio de Vuex 4
https://github.com/vuejs/vuex/tree/4.0
De repente veremos que está escrito en js y al final los tipos están escritos para el código listo para usar.
Por un lado, a nosotros, como usuarios, en teoría no nos importa cómo se escribe el código, lo principal es que es conveniente usarlo. Y aquí es donde un usuario novato se encuentra inmediatamente en una situación extraña al intentar usar mecanografiado para controlar tipos para los objetos de tienda creados. El hecho es que la escritura de la tienda creada en Vuex 4 está ausente en la palabra.
Bueno, está bien, pensé y comencé a buscar una solución.
Para VUE 2, se ofrecen elegantes soluciones basadas en decoradores, por ejemplo, esto . Si miramos el código fuente del proyecto, podemos ver que fue desarrollado para "vue": "> = 2" y "vuex": "3"
El uso de decoradores en Vue 3 se basa en la biblioteca de componentes de clase vue , que aún no se ha documentado. Por lo tanto, el uso de decoradores para escribir en Vuex 4 para Vue 3 parece una tarea complicada en mi opinión en este momento y decidí dejar de usar decoradores para escribir.
La solución que sugiero se basa en el proyecto y el artículo .
El método propuesto por Andrey, en mi opinión, requiere una gran cantidad de código adicional, y en base a su código, implementé mi solución.
Reflejos
store " ", . - . , - auth.ts auth. - ( - typescript ).
Vuex .
Vuex Omit Vuex , actions getters.
store - index.ts ( Vuex ) ( counter auth).
mutatations mutations void. Actions payload , action. typescript 4 - named tupples. - , , index.
typescript 4 - package.json.
vue-cli typescript 3 .
ncu package.json > 4.0 ( typescript 4.1.3 ). package-lock.json npm install.
. src store - . typescript >= 4
initialState.ts - state. state , typescript infer . , - - users:
export const initialState = {
counter: {
counter: 0,
},
auth: {
name: "Ivan",
idUser: "89annsdj77",
email: "ivan@ivan.ru",
users:[] as Array<string>
},
};
- index.ts - "no change code " .
modules - ( Vuex - ).
(), . Actions no change code .
Getters, ActionsPayload, MutationPayload , counter.ts
mutations, getters, actionsactions
HelloWorld.
P.S. - github.