Acontece que comecei a aprender Vue há um mês com Vue 3. Foi anunciado anteriormente que Vue 3 foi reescrito em texto datilografado. Para ser honesto, eu esperava o mesmo da nova versão do Vuex 4 para Vue 3.
Mas, por algum motivo, nem tudo saiu como o esperado. Olhando para o repositório Vuex 4
https://github.com/vuejs/vuex/tree/4.0
De repente, veremos que ele está escrito em js e, no final, os tipos são escritos para o código pronto.
Por um lado, nós, como usuários, em teoria não nos importamos como o código é escrito - o principal é que é conveniente utilizá-lo. E é aqui que um usuário novato se encontra imediatamente em uma situação estranha ao tentar usar o texto digitado para controlar os tipos dos objetos de armazenamento criados. O fato é que a digitação da loja criada no Vuex 4 está ausente da palavra.
Bem, ok, pensei e comecei a procurar uma solução.
Para VUE 2, soluções elegantes baseadas em decoradores são oferecidas, por exemplo, este . Se olharmos o código fonte do projeto, podemos ver que ele foi desenvolvido para "vue": "> = 2" e "vuex": "3"
O uso de decoradores no Vue 3 é baseado na biblioteca vue-class-component , que ainda não foi documentada. Assim, usar decoradores para digitar no Vuex 4 para Vue 3 parece uma tarefa complicada na minha opinião no momento e decidi parar de usar decoradores para digitar.
A solução que sugiro é baseada no projeto e no artigo .
O método proposto por Andrey, na minha opinião, requer uma grande quantidade de código adicional, e com base no código dele, implementei minha solução.
Destaques
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.