Clever Geek Handbook

Vue3のTypescriptを使用したVuex4の入力

たまたま、1か月前にVue 3でVueを学び始めました。以前、Vue3がtypescriptで書き直されたことが発表されました。正直なところ、Vue3用のVuex4の新しいバージョンにも同じことを期待していました。





しかし、何らかの理由で、すべてが期待どおりではなかった。Vuex4リポジトリを見ると

https://github.com/vuejs/vuex/tree/4.0





突然、jsで記述され、最後に既製のコード用に型が記述されていることがわかります。





一方では、ユーザーとして、理論的にはコードの記述方法を気にしません。主なことは、コードを使用するのが便利であるということです。そしてこれは、初心者ユーザーがtypescriptを使用して作成されたストアオブジェクトのタイプを制御しようとすると、すぐに奇妙な状況に陥る場所です。事実、Vuex 4で作成されたストアの入力は、単語にまったく含まれていません。





さて、私は考えて解決策を探し始めました。





VUE 2の場合、エレガントなデコレータベースのソリューションが提供されます。たとえば、これです。プロジェクトのソースコードを見ると、「vue」： "> = 2"および "vuex"： "3"用に開発されたことがわかります。





Vue 3でのデコレータの使用は、vue-class-componentライブラリに基づいていますが、これはまだ文書化されていません。したがって、Vue3のVuex4での入力にデコレータを使用することは、現時点では複雑な作業のように思われるため、入力にデコレータを使用するのをやめることにしました。





私が提案する解決策は、プロジェクトと記事に基づいています。





Andreyによって提案された方法は、私の意見では、大量の追加コードを必要とし、彼のコードに基づいて、私は自分のソリューションを実装しました。





ハイライト

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.







More articles:


All Articles