Vuex: menyusun proyek-proyek besar dan bekerja dengan modul

Vuex adalah perpustakaan manajemen negara aplikasi resmi dan terdokumentasi dengan baik yang dirancang khusus untuk Vue.js. Penulis bahan, terjemahan yang kami terbitkan hari ini, percaya bahwa menggunakan perpustakaan ini jauh lebih menyenangkan daripada Redux, karena, pertama, Vuex membutuhkan lebih sedikit kode boilerplate, dan kedua, karena fakta bahwa ia berfungsi dengan mekanisme asinkron, tidak ada perpustakaan tambahan yang diperlukan di sini. Selain itu, karena perpustakaan Vuex dibuat oleh tim yang sama yang sedang mengerjakan Vue, perpustakaan ini terintegrasi dengan sangat baik dengan kerangka kerja ini. Sayangnya, dalam bekerja dengan Vuex Anda masih dapat menemukan satu kesulitan, yang terdiri dari mempersiapkan dengan benar struktur proyek di mana Anda berencana untuk menggunakan pustaka ini.



Pada artikel ini Anda akan menemukan deskripsi metodologi untuk menyusun proyek besar menggunakan Vuex, dan skrip yang dirancang untuk mengotomatisasi proses pembuatan modul Vuex.

Pola Vue-enterprise-boilerplate dan masalah struktur proyek

Salah satu pengembang Vue, Chris Fritz, menciptakan templat yang sangat baik untuk Vue, struktur proyek yang disajikan yang dirancang untuk menggunakan Vuex. Secara khusus, template ini memungkinkan Vuex untuk secara otomatis mendaftarkan modul berdasarkan file dalam folder modules . Struktur folder proyek mungkin terlihat seperti gambar berikut.


Struktur proyek dan penempatan kode yang tidak nyaman

Saat menggunakan templat ini, perlu bahwa status, getter, aksi, dan mutasi berada dalam file yang sama. Secara pribadi, saya lebih suka menyimpannya dalam file terpisah, yang memungkinkan, mengingat fakta bahwa modul Vuex kadang-kadang cukup besar, lebih mudah untuk menavigasi program, tanpa harus menggulir melalui potongan kode yang besar. Mengikuti ide ini, kami akan mengubah kode dari template sehingga yang terkait dengan modul individual dapat diurutkan ke dalam folder yang ditujukan untuk modul-modul ini. Artinya, struktur proyek akan berubah dan akan mirip dengan yang ditunjukkan di bawah ini.


Struktur proyek dengan rincian materi modul menjadi file terpisah yang ada di folder modul

Pengembangan templat yang mendukung struktur proyek yang nyaman

Jadi, kita akan mengatur kerja dengan Vuex sehingga kita dapat menggunakan folder dan struktur file yang mirip dengan yang ditunjukkan pada gambar sebelumnya di proyek-proyek kita. Untuk melakukan ini, pertama buat proyek baru menggunakan Vue CLI 3 .

Setelah Anda memiliki templat proyek yang siap untuk dikerjakan lebih lanjut, instal Vuex dan Lodash dengan menjalankan npm install vuex lodash -save di terminal. Untuk bekerja dengan modul, kita membutuhkan fungsi camelCase dari Lodash, yang dirancang untuk mengubah string menjadi gaya unta.

Sekarang buat folder dan struktur file yang mirip dengan yang ditunjukkan pada gambar sebelumnya.

Mari kita mulai dengan file store.js . Ini kodenya:

 import Vue from 'vue' import Vuex from 'vuex' import modules from './modules' Vue.use(Vuex) const store = new Vuex.Store({ modules, strict: process.env.NODE_ENV !== 'production' }) //    `init`     for (const moduleName of Object.keys(modules)) { if (modules[moduleName].actions.init) {   store.dispatch(`${moduleName}/init`) } } export default store 

Vue dan Vuex diimpor di sini, karena kita tidak dapat melakukannya tanpa mereka. Selain itu, kami mengimpor modul dari /modules/index.js . Selanjutnya, kami menginisialisasi penyimpanan dan loop melalui semua modul. Jika modul memiliki aksi init , kami menginisialisasi modul. Ini ternyata sangat berguna untuk modul-modul yang perlu diinisialisasi ketika aplikasi dimulai. Akibatnya, tentu saja, kami mengekspor store , setelah itu, biasanya, diimpor ke file main.js dan ditambahkan ke instance Vue.

Sekarang saatnya untuk bekerja dengan file index.js , yang terletak di folder /store/modules .

 //    Vuex     ,    . import camelCase from 'lodash/camelCase'; //    const requireModule = require.context( //      '.', //     true, //   index.js,    ,    //   'actions', 'mutations',  'getters' . //  ,      .js /^(?!.*(actions|mutations|getters|index)).*\.js$/ ); const modules = {}; requireModule.keys().forEach(fileName => { //     if (/\.unit\.js$/.test(fileName)) return; //            modules[camelCase(fileName.split('/')[1].replace(/(\.\/|\.js)/g, ''))] = {   namespaced: true,   ...requireModule(fileName).default }; }); export default modules; 

Dalam kode ini, pertama-tama kita mengimpor fungsi camelCase dari Lodash. Kemudian kami menggunakan metode require.context untuk menghubungkan modul. Sebagai parameter ketiga, kami memberikan ekspresi reguler yang akan memfilter file index.js , serta file yang namanya berisi actions baris, mutations , dan getters . Mereka akan diimpor ke file status, misalnya, di auth.js , dan kemudian diekspor. Sebagai contoh, berikut adalah bagaimana file auth.js dari folder src/store/modules/auth/ terlihat seperti pada awal pekerjaan:

 import actions from './actions'; import mutations from './mutations'; import getters from './getters'; const state = {   user: null }; export default {   state,   mutations,   getters,   actions }; 

Sekarang tinggal memeriksa semua modul dan membentuk satu objek dengan semuanya. Di sini Anda perlu mengecualikan semua file atas nama yang ada unit garis, karena mereka diperlukan hanya untuk pengujian, dan bukan untuk pengembangan atau untuk menyebarkan proyek dalam produksi. Setelah itu, kami menambahkan properti baru ke objek modules , yang akan memiliki nama file status, misalnya, auth atau users . Selain itu, kami menggunakan fungsi camelCase untuk membuat nama properti terlihat konsisten. Kemudian kita mengisi objek modules , requireModule melalui requireModule dan menggunakan ...requireModule(fileName).default , dan kemudian mengekspor modules .

Sebagai soal fakta, ini adalah bagaimana sebuah proyek dapat disusun di mana negara, pengambil, tindakan dan mutasi disimpan secara terpisah dan diatur dengan mudah. Sekarang mari kita bicara tentang cara menulis skrip untuk secara otomatis membuat modul Vuex.

Script untuk membuat modul Vuex secara otomatis

Buat folder baru di folder proyek dengan scripts nama, di dalamnya buat file generateVuexModule.js . Untuk proyek ini kita akan memerlukan Node.js, oleh karena itu, jika Anda belum menginstal platform ini, sekarang saatnya untuk memperbaikinya . Skrip kami hanya memiliki satu ketergantungan - paket chalk , yang digunakan untuk merancang materi yang ditampilkan di konsol. Anda dapat menginstal paket ini dengan npm install -save-dev chalk .

▍Langkah 1

Dalam file generateVuexModule.js , Anda perlu menghubungkan tiga modul: fs , path dan chalk . Juga di sini Anda memerlukan konstanta dengan path ke folder modules ( src/store/modules ) dan konstanta - args , yang akan membuat argumen diteruskan ke skrip ketika dijalankan.

 const fs = require('fs'); const path = require('path'); const chalk = require('chalk'); const modulesPath = 'src/store/modules'; const args = process.argv.slice(2); const error = (...args) => { console.log(chalk.red(...args)); }; const success = (...args) => { console.log(chalk.green(...args)); }; if (!args.length) { error('You must provide a name for the module!'); return; } 

Seperti yang Anda lihat, kami menulis semua argumen ke args kecuali dua argumen pertama, karena argumen tersebut mewakili path ke node.exe dan file skrip, dan kami tidak memerlukan informasi ini. Kami hanya tertarik pada parameter ketiga - nama modul baru. Selain itu, ada beberapa fungsi, error dan success , yang menggunakan paket chalk disebutkan di atas untuk menampilkan pesan dengan teks dengan warna berbeda.

Di sini Anda perlu memeriksa panjang array args untuk mengetahui apakah nama modul diteruskan ke skrip kami, dan jika tidak, berikan pesan kesalahan. Oleh karena itu, jika Anda mencoba menjalankan skrip ini menggunakan perintah node generateVuexModule.js , tanpa meneruskannya, Anda akan melihat pesan kesalahan di terminal.

▍Langkah 2

Pada titik ini, kita memiliki nama untuk module dan path yang diberikan oleh konstanta modulesPath . Namun, kami masih harus bekerja dengan data ini. Yaitu, ekstrak nama dari array args dan kumpulkan path lengkap ke modul, belum lagi pembentukan isinya.

 const moduleName = args[0]; const modulePath = path.join(__dirname, '../', modulesPath, moduleName); if (fs.existsSync(modulePath)) { error(`${moduleName} directory already exists!`); return; } const stateContent = `import getters from './getters'; import actions from './actions'; import mutations from './mutations'; const state = {}; export default { state, getters, actions, mutations }; `; const exportFileContent = `import * as types from '@/store/types'; export default { }; `; 

Nama modul akan berada di elemen array args dengan indeks 0. Pada tahap program ini, kita dapat mengandalkan keberadaan elemen ini, seperti yang sebelumnya kita coba untuk mengekstraknya dari process.argv , dan kemudian memeriksa panjang array args . Selain itu, kami menyiapkan path lengkap menggunakan modul path dan metode join . Kami mendapat direktori saat ini menggunakan __dirname construct, naik satu tingkat ke atas, karena file generateVuexModule.js terletak di folder proyek scripts . Kemudian kita tambahkan saja hasilnya, isi dari modulesPath dan nama module. Pada titik ini, konstanta modulePath harus berisi sesuatu seperti pathToYourProject/project/src/store/modules/moduleName . Di sinilah modul akan dibuat. Sekarang, karena kita memiliki path lengkap, kita dapat memeriksa apakah direktori ini ada. Kami tidak ingin secara tidak sengaja menimpa file dari modul yang ada. Akibatnya, jika direktori tempat Anda berencana membuat modul baru ada, kami akan menampilkan pesan kesalahan dalam huruf merah, berkat chalk .


Contoh pesan kesalahan

Selanjutnya, Anda perlu membuat konstanta di mana akan ada data untuk file. Seperti yang dapat Anda bayangkan, stateContent digunakan untuk file state, yaitu, misalnya, untuk auth.js , dan exportFileContent digunakan untuk getters.js , getters.js , dan mutations.js . Jika perlu, Anda dapat menambahkan ke daftar ini semua yang diperlukan dalam proyek Anda.

▍Langkah 3

Sekarang kita hanya perlu membuat path untuk file modul dan membuatnya.

 const statePath = `${path.join(modulePath, `${moduleName}.js`)}` const gettersPath = `${path.join(modulePath, 'getters.js')}` const actionsPath = `${path.join(modulePath, 'actions.js')}` const mutationsPath = `${path.join(modulePath, 'mutations.js')}` fs.mkdirSync(modulePath); fs.appendFileSync(statePath, stateContent); fs.appendFileSync(gettersPath, exportFileContent); fs.appendFileSync(actionsPath, exportFileContent); fs.appendFileSync(mutationsPath, exportFileContent); success('Module', moduleName, 'generated!'); 

Pertama kita mendeklarasikan empat konstanta, yang masing-masing berisi path untuk file yang sesuai. Selanjutnya, kita perlu membuat folder untuk modul. Kami sudah memeriksa apakah folder tersebut ada dan memberikan kesalahan jika memang demikian. Karena itu, seharusnya tidak ada masalah dengan membuat folder. Dan akhirnya, kita menggunakan fs.appendFileSync , menempatkan file baru dengan konten yang ditentukan dalam proses pembuatannya di direktori yang baru dibuat. Pada akhirnya, skrip menampilkan pesan tentang keberhasilan penyelesaian operasi.

Untuk menggunakan skrip ini, cukup buka folder scripts proyek Anda di terminal dan jalankan perintah dari node generateVuexModule.js yourModuleName formulir node generateVuexModule.js yourModuleName . Setelah berhasil menyelesaikan skrip, Anda akan melihat pesan tentang membuat modul.

Ringkasan

Setelah meninjau materi ini, Anda belajar tentang templat untuk menyusun proyek-proyek besar di mana Anda berencana untuk menggunakan Vuex, dan skrip yang menyederhanakan pembuatan modul Vuex. Kami harap pengetahuan ini bermanfaat bagi Anda. Kode proyek, contoh-contoh yang kami periksa, dapat ditemukan di sini .

Pembaca yang budiman! Bagaimana Anda menyusun aplikasi Vue besar yang menggunakan Vuex?