CFSDN nhấn mạnh vào giá trị tạo ra nguồn mở và chúng tôi cam kết xây dựng nền tảng chia sẻ tài nguyên để mọi nhân viên CNTT có thể tìm thấy thế giới tuyệt vời của bạn tại đây.

Bài viết blog CFSDN này, công cụ quản lý trạng thái Vue3 mới: Pinia, được tác giả sưu tầm và biên soạn. Nếu các bạn quan tâm đến bài viết này thì nhớ like nhé.

Vue3 đã được phát hành một thời gian. Nó áp dụng một hệ thống phản hồi mới và xây dựng API Thành phần mới. Hệ sinh thái xung quanh Vue đang tăng cường nỗ lực thích ứng với hệ thống mới này và thư viện quản lý nhà nước chính thức Vuex cũng đang thích ứng. Vì lý do này, quan chức này đã đưa ra một đề xuất mới cho Vuex 5.

• Hỗ trợ 2 cú pháp tạo Store: Options Api và Composition Api;
• Xóa các đột biến và chỉ hỗ trợ trạng thái, getters và hành động;
• Thiết kế mô-đun có thể hỗ trợ tốt việc phân tách mã;
• Không có mô-đun lồng nhau, chỉ có khái niệm về Cửa hàng;
• Hỗ trợ TypeScript đầy đủ;

Bên dưới đề xuất này có một bình luận thú vị. Dịch đơn giản:

Thật là trùng hợp. Đề xuất của Vuex5 không thể nói là không liên quan gì đến các chức năng do Pinia triển khai mà chỉ có thể nói là chúng giống hệt nhau. Bài viết hôm nay sẽ giới thiệu cho các bạn về quả dứa này.

Cài đặt

Trong dự án hiện tại, lệnh sau đã được sử dụng để cài đặt mô-đun Pinia.

1. # sợi
2. sợi len thêm vào pinia@Kế tiếp
3. # npm
4. npm và pinia@Kế tiếp

Sau khi cài đặt hoàn tất, bạn cần nhập và cài đặt nó trong tệp nhập của dự án Vue3.

1. // chính.js
2. nhập {createApp} từ 'xem'
3. nhập {createPinia} từ 'pinia'
4. nhập ứng dụng từ './App.view'
5.  
6. // Khởi tạo Vue
7. const app = createApp(Ứng dụng)
8. //Cài đặt Pinia
9. ứng dụng.sử dụng(createPinia())
10. // Được gắn vào DOM thực
11. ứng dụng. mount('#ứng dụng')

Tốt

Để sử dụng Pinia, bạn chỉ cần xác định một cửa hàng và sau đó nhập dữ liệu vào bất cứ nơi nào nó được sử dụng.

Xác định cửa hàng

1. nhập { defineStore } từ "pinia"
2.  
3. // Đưa một phương thức use ra bên ngoài, phương thức này sẽ xuất trạng thái mà chúng ta đã xác định
4. const useCounterStore = defineStore({
5. //Id của mỗi cửa hàng phải là duy nhất
6. nhận dạng: 'quầy tính tiền',
7. // trạng thái đại diện cho nguồn dữ liệu
8. trạng thái: () => ({
9. đếm: 0
10. }),
11. // getters tương tự như được tính toán và có thể thực hiện các phép tính phụ trên giá trị trạng thái
12. các hàm lấy: {
13. gấp đôi () {
14. // cái này trong getter trỏ tới trạng thái
15. trở lại cái này.đếm * 2
16. },
17. // Sử dụng hàm mũi tên sẽ gây ra vấn đề với việc trỏ này
18. // Bạn có thể lấy trạng thái ở tham số đầu tiên của hàm
19. gấp đôi: (trạng thái) => {
20. trở lại tình trạng.đếm * 2
21. }
22. },
23. // các hành động được sử dụng để sửa đổi trạng thái
24. hành động: {
25. tăng() {
26. // hoạt động điều này nhằm nêu rõ
27. cái này.đếm++
28. },
29. }
30. })
31.  
32. xuất khẩu mặc định sử dụngCounterStore

Ngoài việc sử dụng phương thức giống vuex đã đề cập ở trên để xây dựng trạng thái, bạn cũng có thể sử dụng dạng hàm để tạo một cửa hàng, hơi giống với setup() trong Vue3.

1. nhập { tham chiếu, tính toán } từ "nhìn"
2. nhập { defineStore } từ "pinia"
3.  
4. // Đưa một phương thức use ra bên ngoài, phương thức này sẽ xuất trạng thái mà chúng ta đã xác định
5. const useCounterStore = defineStore('quầy tính tiền', chức năng () {
6. hằng số đếm = tham chiếu(0)
7. hằng số gấp đôi = tính toán(() => đếm.giá trị * 2)
8. chức năng tăng() {
9. đếm.giá trị++
10. }
11. trở lại {
12. đếm, gấp đôi, tăng dần
13. }
14. })
15.  
16. xuất khẩu mặc định sử dụngCounterStore

Sử dụng cửa hàng

Như đã đề cập trước đó, Pinia cung cấp hai cách để sử dụng cửa hàng, cả Api Tùy chọn và Api Thành phần đều được hỗ trợ hoàn hảo.

Tùy chọn API

Trong Options Api, bạn có thể trực tiếp sử dụng các phương thức mapActions và mapState được cung cấp chính thức để xuất trạng thái, getter và hành động trong cửa hàng. Cách sử dụng của nó về cơ bản giống như Vuex và rất dễ dàng để bắt đầu.

1. nhập { mapActions, mapState } từ 'pinia'
2. nhập { sử dụngCounterStore } từ '../mô hình/bộ đếm'
3.  
4. xuất khẩu mặc định {
5. tên: 'Xin chào thế giới',
6. tính toán: {
7. ...mapState(useCounterStore, ['đếm', 'gấp đôi'])
8. },
9. phương pháp: {
10. ...mapActions(useCounterStore, ['tăng dần'])
11. }
12. }

Thành phần Api

Trong Composition Api, cả trạng thái và getter cần được theo dõi để phát hiện các thay đổi thông qua phương thức được tính toán. Điều này giống với Api tùy chọn, cần được đặt trong đối tượng được tính toán. Ngoài ra, giá trị trạng thái thu được trong Options Api có thể được sửa đổi trực tiếp. Tất nhiên, bạn nên viết một hành động để vận hành giá trị trạng thái để thuận tiện cho việc bảo trì sau này.

1. // API thành phần
2. nhập khẩu { tính toán } từ 'xem'
3. nhập { sử dụngCounterStore } từ '../cửa hàng/quầy'
4. xuất khẩu mặc định {
5. tên: 'Xin chào thế giới',
6. cài đặt() {
7. hằng số counter = useCounterStore()
8. trở lại {
9. // Cả state và getter đều cần sử dụng tính toán, tương tự như Options Api
10. đếm: computed(() => bộ đếm.đếm),
11. gấp đôi: computed(() => bộ đếm.gấp đôi),
12. tăng dần: () => { bộ đếm.đếm++ }, // Bạn có thể trực tiếp sửa đổi giá trị của trạng thái
13. tăng: counter.increment, // có thể tham chiếu đến cái được xác định trong cửa hàng hoạt động
14. }
15. }
16. }

gợi ý gõ

Trong Vuex, gợi ý kiểu của TypeScript không tốt lắm. Khi thực hiện khấu trừ kiểu, bạn chỉ có thể tìm thấy trạng thái của nó. Đặc biệt trong quá trình viết code, các dòng nhắc code rất thiếu thông minh.

Pinia có thể suy ra tất cả các trạng thái, getters và hành động được xác định, điều này sẽ thuận tiện hơn nhiều khi viết mã.

Lý do chính là pinia có định nghĩa kiểu rất thân thiện thông qua TypeScript. Nếu quan tâm, bạn có thể xem qua tệp định nghĩa kiểu của pinia (pinia.d.ts):

chia mã

Do thiết kế mô-đun nên tất cả các cửa hàng có thể được giới thiệu riêng lẻ, thay vì gắn tất cả các mô-đun vào một cửa hàng thông qua các mô-đun như vuex.

Giả sử rằng chúng ta hiện đang tạo Cửa hàng thông qua Vuex. Có hai mô-đun trong Cửa hàng này, đó là mô-đun người dùng (Người dùng) và mô-đun sản phẩm (Hàng hóa). Ngay cả khi trang chủ hiện tại chỉ sử dụng thông tin người dùng, toàn bộ Cửa hàng sẽ được đóng gói vào đoạn js của trang chủ.

Nếu sử dụng pinia, chúng ta sẽ sử dụng definStore để xác định 2 store hoàn toàn riêng biệt. Khi 2 trang được giới thiệu sẽ không ảnh hưởng lẫn nhau. Trong quá trình đóng gói cuối cùng, đoạn js của trang chủ và đoạn js của trang sản phẩm sẽ được đóng gói tương ứng vào các cửa hàng tương ứng.

Phần giới thiệu về Pinia kết thúc ở đây Nếu bạn có một dự án mới cần được phát triển bằng Vue3, thì nên sử dụng Pinia mà không cần não. Nó ngắn gọn hơn và chỉ có kích thước 1KB.

Liên kết gốc: https://mp.weixin.qq.com/s/lzjeEMPd_V8OmIe8tnQRuQ.

Cuối cùng, bài viết này về công cụ quản lý trạng thái Vue3 mới: Pinia kết thúc tại đây. Nếu bạn muốn biết thêm về công cụ quản lý trạng thái Vue3 mới: Pinia, vui lòng tìm kiếm bài viết CFSDN hoặc tiếp tục duyệt các bài viết liên quan. trong tương lai! .