Mô-đun vue css

Trong một ứng dụng nói chung, ứng dụng Vue nói riêng, việc các thành phần phải sử dụng trạng thái chung là điều khó tránh khỏi. Để thực hiện điều đó, bạn sẽ phải truyền biến đó qua lại giữa các thành phần. This job doing for source code back up lộn ngược, khó đọc. Đây là lúc bạn nghĩ đến việc sử dụng Vuex để quản lý Nhà nước

Mình lấy một điển hình cho bạn dễ hình dung. Ứng dụng có tính năng đăng nhập, do vậy trạng thái [trạng thái] người dùng đã đăng nhập/đăng xuất sẽ được sử dụng ở mọi thành phần trong ứng dụng. Thay vì bang này được truyền thông “tùm ùm” mỗi khi cần đến, bạn sẽ quản lý bang đó ở một nơi duy nhất. Tất cả các thành phần nếu cần thì vào đó mà lấy

Có một thư viện chuyên quản lý trạng thái đó là Vuex. Bài viết này chúng ta cùng nhau tìm hiểu cách sử dụng Vuex để quản lý trạng thái trong ứng dụng VueJS nhé

Nội dung chính của bài viết

• Vuex là gì?
• Cài đặt Vuex
• Sử dụng Vuex để khởi tạo Store
  • chỉ mục cửa hàng
  • mô-đun
  • 1. mục lục. js
  • 2. đột biến. js
  • 3. hành động. js
  • 4. người thu thập. js
• Cách sử dụng Store trong một thành phần
  • Các thành phần
  • Hình thức sản phẩm. vue
  • danh sách sản phẩm. vue
• trong danh sách chứng khoán. vue
  • Sản phẩm demo
• pause

Vuex là gì?

Vuex là thư viện chuyên quản lý State cho ứng dụng VueJS. Nếu bạn đã từng làm việc với React thì có lẽ Vuex cũng có chức năng tương tự như Redux

Vuex sẽ lưu tất cả Trạng thái của ứng dụng vào một nơi gọi là Cửa hàng

Khi sử dụng Vuex, mọi thành phần sẽ sử dụng cùng một trạng thái. Nếu không, mỗi thành phần sẽ có một phiên bản riêng của Trạng thái đó

Phần tiếp theo của bài viết, mình sẽ hướng dẫn

• Cách cài đặt Vuex store
• Cách sử dụng Cửa hàng này trong các Thành phần

Chúng ta sẽ bắt đầu bằng cách khởi tạo dự án Vue mới. Đọc lại cách tạo dự án Vue

Cài đặt Vuex

Cách cài đặt Vuex cũng tương tự như mọi mô-đun khác thôi

npm install vuex --save

hoặc

yarn add vuex

Sử dụng Vuex để khởi tạo Store

Một cửa hàng có thể có nhiều mô-đun và để cấu trúc mã nguồn dự án đỡ lộn xộn, mình sẽ tạo riêng một thư mục

yarn add vuex

0 bên trong thư mục

yarn add vuex

1

Tiếp tục tạo một thư mục “

yarn add vuex

2” bên trong cửa hàng. Cuối cùng là tạo tệp

yarn add vuex

3 bên trong thư mục

yarn add vuex

0. Kết quả sẽ có cây thư mục như hình dưới đây

Constructor state directory manager với vuex

chỉ mục cửa hàng

Giả sử chúng ta có mô-đun là sản phẩm, nơi chứa trạng thái của các sản phẩm. Vì vậy, trong

yarn add vuex

3, chúng ta sẽ cần khai báo để nhập các cửa hàng mô-đun được sử dụng

________số 8

mô-đun

Tất cả Trạng thái của ứng dụng Vue sẽ được lưu trong một đối tượng. Các đối tượng này sẽ mọc ra khi ứng dụng ngày càng phức tạp hơn

May mắn là Vuex cho phép bạn chia nhỏ store thành nhiều module. Mỗi mô-đun sẽ độc lập với nhau và có đầy đủ 4 thành phần. trạng thái, getters, hành động và đột biến

Vì vậy, khi bạn tạo một mô-đun mới, bạn cần tạo các tệp sau

• yarn add vuex

  3

• yarn add vuex

  7

• yarn add vuex

  8

• yarn add vuex

  9

Mình sẽ giải thích và cùng thực hiện việc viết code chi tiết cho từng file một

1. mục lục. js

yarn add vuex

3 là nơi mình định nghĩa trạng thái của các mô-đun. Hơn nữa, tệp này sẽ đóng gói getters, action, mutants thành một đối tượng đại diện cho trạng thái đó

Mặc định, mọi thứ bên trong một mô-đun sẽ được đăng ký hoạt động cho phạm vi toàn dự án [toàn cầu]. Điều này cho phép nhiều mô-đun có thể phản ứng với cùng một đột biến hoặc hành động

Tuy nhiên, mình không thích cách mặc định này, mình thích các mô-đun nên đóng kín và hoạt động riêng rẽ thay vì toàn cầu. To do this thing mình đặt đơn giản

import Vue from 'vue';
import Vuex from 'vuex';
import {products} from './modules/products';

Vue.use[Vuex];

export const store = new Vuex.Store[{
    modules: {
        products,
    }
}];

1 trong các mô-đun

yarn add vuex

5

Như bạn có thể thấy ở đoạn mã trên, Trạng thái chỉ là một đối tượng với các thuộc tính là các mô-đun

Trạng thái đơn giản chỉ là một đối tượng được chia sẻ trong toàn bộ ứng dụng. vntalking

2. đột biến. js

Như cái tên của nó,

yarn add vuex

9 sẽ chứa tất cả các đột biến hàm

Theo định nghĩa, Mutations is used functions to change the value of state

Trong Vuejs, Mutation là cách duy nhất để thay đổi trạng thái của bạn và bắt buộc phải thực hiện đồng bộ

Trong Vuex, tham số đầu tiên của đột biến hàm luôn là trạng thái đối tượng

yarn add vuex

7

3. hành động. js

Tệp

yarn add vuex

8 chứa tất cả các hành động của hàm. Các thao tác hàm gần giống với đột biến hàm, nhưng chúng không làm thay đổi trạng thái. Đặc biệt, các thao tác hàm có thể thực hiện bất đồng bộ [không đồng bộ]

yarn add vuex

9

Trong ví dụ trên, chúng ta có hai hành động, cả hai hành động này đều cam kết đột biến. Trong đó, mình có minh họa cả hai kiểu. action function run set [hàm

import Vue from 'vue';
import Vuex from 'vuex';
import {products} from './modules/products';

Vue.use[Vuex];

export const store = new Vuex.Store[{
    modules: {
        products,
    }
}];

4] and run not dong set [hàm

import Vue from 'vue';
import Vuex from 'vuex';
import {products} from './modules/products';

Vue.use[Vuex];

export const store = new Vuex.Store[{
    modules: {
        products,
    }
}];

5]

4. người thu thập. js

Tệp

yarn add vuex

7 chứa tất cả các hàm getter. Hàm getter là nơi lưu trữ tính toán các thuộc tính của thành phần

Hàm Getter có quyền truy cập vào trạng thái thông qua tham số đầu tiên

Cách sử dụng Store trong một thành phần

Trước khi có thể sử dụng cửa hàng bên trong các thành phần, chúng ta cần đưa vào tất cả thành phần con từ thành phần gốc. Chúng ta thực hiện điều này trong

import Vue from 'vue';
import Vuex from 'vuex';
import {products} from './modules/products';

Vue.use[Vuex];

export const store = new Vuex.Store[{
    modules: {
        products,
    }
}];

7, nơi mà ví dụ Vue được tạo ra

yarn add vuex

4

Các thành phần

Để minh họa cho cách sử dụng cửa hàng trong thành phần, mình sẽ tạo 3 thành phần trong thư mục “thành phần”

• import Vue from 'vue';
  import Vuex from 'vuex';
  import {products} from './modules/products';
  
  Vue.use[Vuex];
  
  export const store = new Vuex.Store[{
      modules: {
          products,
      }
  }];
  

  8

• import Vue from 'vue';
  import Vuex from 'vuex';
  import {products} from './modules/products';
  
  Vue.use[Vuex];
  
  export const store = new Vuex.Store[{
      modules: {
          products,
      }
  }];
  

  9

• yarn add vuex

  50

Hình thức sản phẩm. vue

Thành phần sẽ có biểu mẫu để gửi hành động đến cửa hàng, mục đích là thêm sản phẩm khi người dùng nhấn nút “lưu”

Vì chúng ta đã bật không gian tên trong mô-đun, nên tại đây, các thao tác hàm cũng phải có tên với tiền tố [tiền tố] trùng với tên của mô-đun

yarn add vuex

8

danh sách sản phẩm. vue

ProductList component will display all products, both in stock or not in stock

Lưu ý rằng. biến sản phẩm được lấy giá trị từ đối tượng trạng thái, chúng ta sẽ sử dụng trình trợ giúp mapState cho công việc này. mapState helper sẽ tự động tạo ra hàm getter đã được tính toán cho chúng ta

Do chúng ta đã bật namespace cho module, nên cần chuyển tên module vào tham số đầu tiên, tham số thứ hai là danh sách các thuộc tính mà chúng ta muốn tạo cho getter function

Đọc thêm. “…” được gọi là toán tử trải rộng. Bạn có thể đọc thêm tại đây

yarn add vuex

9

trong danh sách chứng khoán. vue

Cũng giống như thành phần ProductList, thành phần này chỉ hiển thị các sản phẩm. Chỉ khác là nó chỉ hiển thị các sản phẩm nằm trong danh mục Chứng khoán

Để làm được điều này, thành phần này gọi hàm trong Stock getter trong cửa hàng, nơi mà mình đã áp dụng công việc lọc sản phẩm

yarn add vuex

0

Sản phẩm demo

Về cơ bản chúng ta đã code xong, các bạn có thể chạy thử và thu được kết quả. Mình đã tạo sẵn code chạy online tại đây

demo ví dụ vuex

pause

Như vậy, chúng ta cùng nhau tìm hiểu cách sử dụng Vuex để quản lý trạng thái của ứng dụng. Mình hi vọng bài viết sẽ giúp bạn hiểu và có thể làm việc ngon lành với Vuex

Ngoài ra, sử dụng Vuex còn là một trong 3 cách truyền dữ liệu giữa các thành phần, bạn có thể tham khảo thêm bài viết này. 3 cách truyền dữ liệu trong Vue

Xin vui lòng để lại bình luận nếu có bất kỳ thắc mắc, câu hỏi hay muốn mình viết thêm bất kỳ chủ đề liên quan đến Vue

​Miễn phí khóa học React Native

Bạn có muốn tải xuống toàn bộ video của khóa học rất nổi tiếng về React Native này không?

TẢI XUỐNG

• THẺ
• jav
• setting front-end user
• tự học lập trình front-end
• vuejs

Facebook

Twitter

liên kết

Pinterest

WhatsApp

Bài trước “Lỗi chính tả” cũng là một chiến lược ASO hay

Bài tiếp theo Javascript là gì?

sơn dương

Tên đầy đủ là Dương Anh Sơn. Tốt nghiệp ĐH Bách Khoa Hà Nội. Mình bắt đầu nghiệp coder khi mà ra trường đúng là xin được làm đúng chuyên ngành. Mình tin rằng chỉ có chia sẻ kiến ​​thức mới là cách học tập nhanh nhất. Các bạn góp ý bài viết của mình bằng cách comment bên dưới nhé