Kebetulan saya mulai belajar Vue sebulan yang lalu dengan Vue 3. Sebelumnya diumumkan bahwa Vue 3 ditulis ulang dalam bentuk skrip. Sejujurnya, saya mengharapkan hal yang sama dari versi baru Vuex 4 untuk Vue 3.
Namun entah kenapa, semuanya ternyata tidak sesuai harapan. Dengan melihat repositori Vuex 4
https://github.com/vuejs/vuex/tree/4.0
Tiba-tiba kita akan melihat bahwa itu ditulis dalam js dan pada akhirnya tipe ditulis untuk kode yang sudah jadi.
Di satu sisi, kami, sebagai pengguna, secara teori tidak peduli bagaimana kode itu ditulis - yang utama adalah nyaman untuk menggunakannya. Dan di sinilah pengguna pemula segera menemukan dirinya dalam situasi yang aneh ketika mencoba menggunakan skrip ketikan untuk mengontrol tipe untuk objek penyimpanan yang dibuat. Faktanya adalah bahwa pengetikan toko yang dibuat di Vuex 4 sama sekali tidak ada di kata.
Baiklah, saya berpikir dan mulai mencari solusi.
Untuk VUE 2, solusi berbasis dekorator yang elegan ditawarkan, misalnya, ini . Jika kita melihat kode sumber proyek, kita dapat melihat bahwa itu dikembangkan untuk "vue": "> = 2" dan "vuex": "3"
Penggunaan dekorator di Vue 3 didasarkan pada pustaka komponen kelas vue , yang bahkan belum didokumentasikan. Jadi, menggunakan dekorator untuk mengetik di Vuex 4 untuk Vue 3 sepertinya pekerjaan yang rumit menurut saya saat ini dan saya memutuskan untuk berhenti menggunakan dekorator untuk mengetik.
Solusi yang saya sarankan didasarkan pada proyek dan artikel .
Metode yang diusulkan oleh Andrey, menurut saya, membutuhkan kode tambahan dalam jumlah besar, dan berdasarkan kodenya, saya menerapkan solusi saya.
Highlight
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.