Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các cách khai báo biến trong Javascript 
Các sự kiện (Event) trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Hàm array.slice() trong Javascript 
Tính tổng hai số bằng Javascript (cộng hai số) 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng Lưu trữ dữ liệu vào Vuex trong VueJS 2
Trong bài tập này, mình sẽ tìm hiểu cách sử dụng Vuex để lưu trữ dữ liệu nhận được từ API và hiển thị dữ liệu đó trong các component của VueJS 2. Vuex là một trạng thái quản lý để giữ cho trạng thái của ứng dụng được quản lý hiệu quả.
Bước 1: Cài Đặt Vuex
Trước tiên, hãy cài đặt Vuex bằng cách chạy lệnh sau:
npm install vuex
Bước 2: Tạo Store Vuex và Mutations
Tạo store/index.js để quản lý Vuex:
// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
// Trạng thái lưu trữ dữ liệu
data: [],
},
mutations: {
// Mutation để cập nhật dữ liệu
setData(state, newData) {
state.data = newData;
},
},
actions: {
// Action để gửi request API và cập nhật dữ liệu
fetchData({ commit }) {
// Thay thế url bằng endpoint thực tế của API
const apiUrl = 'https://api.example.com/data';
// Sử dụng Axios hoặc Fetch API để gửi request API
// Sau khi nhận được dữ liệu, gọi commit để cập nhật trạng thái
// Ví dụ sử dụng Axios:
// axios.get(apiUrl).then(response => commit('setData', response.data));
},
},
getters: {
// Getter để lấy dữ liệu từ trạng thái
getData: (state) => state.data,
},
});
Bước 3: Gửi dữ liệu từ API vào Store
Chỉnh sửa store/index.js để sử dụng Axios và thêm actions:
// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios'; // Import Axios
Vue.use(Vuex);
export default new Vuex.Store({
state: {
data: [],
},
mutations: {
setData(state, newData) {
state.data = newData;
},
},
actions: {
async fetchData({ commit }) {
const apiUrl = 'https://api.example.com/data';
try {
// Gửi request API và nhận dữ liệu
const response = await axios.get(apiUrl);
// Gọi mutation để cập nhật trạng thái với dữ liệu mới
commit('setData', response.data);
} catch (error) {
console.error('Error fetching data from API:', error);
}
},
},
getters: {
getData: (state) => state.data,
},
});
Bước 4: Sử dụng Getters trong Component
Chỉnh sửa component để sử dụng getters:
// src/views/Home.vue
<template>
<div>
<h1>Welcome to Home</h1>
<div v-if="data.length > 0">
<ul>
<li v-for="item in data" :key="item.id">{{ item.name }}</li>
</ul>
</div>
<div v-else>
<p>Loading data...</p>
</div>
</div>
</template>
<script>
export default {
name: 'Home',
computed: {
data() {
// Sử dụng getter để lấy dữ liệu từ store
return this.$store.getters.getData;
},
},
created() {
// Gọi action để fetch dữ liệu khi component được tạo
this.$store.dispatch('fetchData');
},
};
</script>
<style>
/* CSS styles (if any) */
</style>
Trong bài tập này, mình đã sử dụng Vuex để quản lý trạng thái của ứng dụng VueJS 2. Đã tạo ra một store Vuex với mutations để cập nhật dữ liệu và actions để gửi request API và cập nhật trạng thái. Bằng cách sử dụng getters, mình đã hiển thị dữ liệu từ Vuex trong component một cách thuận tiện và linh hoạt. Chúc mừng bạn đã thành công!
Bài giải
-------------------- ######## --------------------
Câu hỏi thường gặp liên quan:
- Gửi HTTP GET Request và hiển thị dữ liệu trong VueJS 2
- Gửi HTTP POST Request với dữ liệu người dùng nhập trong VueJS 2
- Sử dụng Axios Interceptors trong VueJS 2
- Lưu trữ dữ liệu vào Vuex trong VueJS 2
- Thực hiện các loại Request (GET, POST, PUT, DELETE) trong VueJS 2
