- vừa được xem lúc

Tìm hiểu cơ bản về Vuex Store

0 0 62

Người đăng: Salary Duong

Theo Viblo Asia

1. Creating a Store

Vuex đã cung cấp sẵn class Store, vì vậy ta có thể sử dụng bằng cách import vào để lấy đối tượng Vuex và tạo một Store mới

import Vuex from 'vuex'; // Create a new store:
const store = new Vuex.Store({ state: { count: 0 }
});

Hoặc có thể load Vuex thông qua CDN như sau:

<script src="https://unpkg.com/vuex/dist/vuex.js"></script>
<script> const store = new Vuex.Store({ state: { count: 0 } });
</script>

2. Using a Store

Để lấy được giá trị trong store, khá đơn giản, bạn chỉ cần gọi đến hành động tương ứng khi định nghĩa store như ví dụ sau:

import Vuex from 'vuex'; // Create a new store:
const store = new Vuex.Store({ state: { count: 0 }
}); store.state; // { count: 0 }

Theo lời khuyên từ các chuyên gia, bạn không nên thay đổi state một cách trực tiếp mà phải thông qua mutations. Hãy cũng xem ví dụ sau:

const Vuex = require('vuex'); const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment: store.count += 1, decrement: store.count -= 1 }
}); store.state; // { count: 0 } store.commit('increment');
store.state; // { count: 1 } store.commit('decrement');
store.state; // { count: 0 }

Ở trên mình có định nghĩa một mutation để thực hiện việc tăng giảm biến count được khởi tạo trong state. Khi muốn gọi mutations để thay đổi state thì bạn phải thực hiện 1 commit và message tương ứng với biến đã định nghĩa trong mutations. Và store sẽ thực hiện hành động bên trong mutations được gọi và thay đổi state.

Một điều nữa, mặc dù bạn có thể gọi trực tiếp store.state, nhưng bạn ko nên làm điều đó. Vì Vuex đã cung cấp cho bạn một phương thức getters để thực hiện việc get dữ liệu

const Vuex = require('vuex'); const store = new Vuex.Store({ state: { count: 0 }, getters: { count: store => store.count }, mutations: { increment: store => store.count += 1, decrement: store => store.count -= 1 }
}); store.getters.count; // 0 store.commit('increment');
store.getters.count; // 1

Cảm ơn các bạn đã theo dõi. Để tìm hiểu thêm về Vuex cũng như VueJS, các bạn có thể truy cập tại đây.

Bình luận

Bài viết tương tự

- vừa được xem lúc

Vuex có thật sự cần thiết hay không ???

Như chúng ta đã biết Vuejs, cho đến thời điểm hiện tại Vuejs là một framework mạnh mẽ được tin tưởng và sử dụng bởi rất nhiều công ty cũng như các anh em developer chúng ta hiện nay. Trong đó, Vuex được biết đến như một thư viện giúp bạn quản lý trạng thái các component trong VueJS, đây cũng là nơi

0 0 84

- vừa được xem lúc

Khái niệm cơ bản về NuxtJs

1. NuxtJs là gì . Cho phép tạo Universal Vue Apps. .

0 0 399

- vừa được xem lúc

[Vue.js] Triển khai REST API sử dụng Axios

Hiện tại có rất nhiều Frameworks có tích hợp HTTP APIs như Angular 2 có http module, JQuery có $.ajax và Vue.js 2.0 có vue-resource.

0 0 42

- vừa được xem lúc

Học vuex qua các ví dụ đơn giản (phần 2)

Mở đầu. Xin chào các bạn để tiếp tục với series học vuex qua các ví dụ đơn giản, ở phần trước mình đã giới thiệu vuex là gì, vì sao cần dùng vuex và State nếu các bạn chưa đọc thì có thể đọc lại phần

0 0 36

- vừa được xem lúc

Học vuex qua các ví dụ đơn giản (phần 1)

Mở Đầu. xin chào các bạn hôm nay mình trình bày về Vuex, như tiêu đề đã nêu ở trên thì trong series này mình sẽ không tập trung vào lý thuyết mà sẽ tập trung chủ yếu vào ví dụ, làm sao cho từ các ví d

0 0 58

- vừa được xem lúc

Mapping hoạt động như thế nào trong Vuex ???

Quản lý state trong ứng dụng Vue thực sự rất là khó, đặc biệt là khi có quá nhiều state. Và Vuex là một thư viện được sinh ra để quản lý state cho các ứng dụng Vue.

0 0 84