VANHIEP.NET - Làm web giá rẻ - Thiết Kế Website - Thiết Kế Ứng Dụng Mobile
Sử dụng vuex trong dự án vuejs

Sử dụng vuex trong dự án vuejs

Vuex là gì ?

Cách sử dụng vuex trong dự án như thế nào?

1. Vuex là gì ?

Vuex là công cụ được xây dựng để quản lý dữ liệu ở global nhằm giải quyết bài toán truyền dữ liệu qua lại giữa component. Vuex có chức năng giống với redux trong reactjs

Cài đặt vuex bằng lệnh sau

yarn add vuex@3.1.1

Phía sau @ bạn có thể tùy chọn phiên bản cần cài

2. Cách sử dụng vuex trong dự án vuejs

Bước 1 : Tạo thư mục store ngang hàng với thư mục components, đồng thời tạo các file với tên như sau 

Nội dung trong file index.js

Nội dung trong file actions.js như sau

Nội dung trong file getters.js như sau 

Nội dung trong file mutations như sau 

Nội dung trong file state như sau

Để sử dụng các thành phần của vuex trong components ta có thể import nó vào như sau

import { mapGetters, mapState, mapActions, mapMutations } from "vuex";

Trong đó : mapActions và mapMutations khai báo ở methods của components như sau 

mapGetters và mapState khai báo ở computed như sau 

Thành phần khai báo ở computed thì sử dụng như dữ liệu data. Còn thành phần khai báo ở methods thì sử dụng như cách gọi hàm bình thường

this.incrementAction()

 

  • Lee Dong Chul

    Vuex phiên bản 4.x.x không dùng được cho vue 2, nếu bạn dùng vue2 thì hãy cãi vuex bản 3.x thôi nhé

  • Lee Dong Chul

    Chúc các bạn thành công !