Vuex và Pinia là hai thư viện quản lý trạng thái cho các ứng dụng Vue.js. Vuex là thư viện cũ hơn và lâu đời hơn, nhưng Pinia đang trở nên phổ biến nhờ API đơn giản hơn và hỗ trợ TypeScript tốt hơn.

Quản lý state là gì?

Quản lý state là quá trình quản lý dữ liệu được chia sẻ giữa các thành phần khác nhau trong ứng dụng Vue. Điều này có thể phức tạp, đặc biệt đối với các ứng dụng phức tạp, nơi cần có các thư viện quản lý trạng thái như Vuex và Pinia.

Vuex

Vuex là một thư viện quản lý trạng thái (state management) cho ứng dụng Vue.js. Nó giữ trạng thái của ứng dụng trong một trung tâm duy nhất gọi là “store”. Vuex cũng cung cấp một số tính năng giúp quản lý trạng thái dễ dàng, chẳng hạn như:

• Mutations: là các hàm thuần túy cập nhật trạng thái theo cách có thể dự đoán được.
• Actions: là các hàm không đồng bộ có thể được sử dụng để thực hiện các tác vụ cập nhật trạng thái, chẳng hạn như tìm nạp dữ liệu từ API.
• Getters: là các hàm thuần túy có thể được sử dụng để tính toán các giá trị từ trạng thái.

Pinia

Pinia cũng là một thư viện quản lý trạng thái, nhưng được thiết kế với mô hình dựa trên cơ sở TypeScript. Nó khuyến khích sử dụng các cửa hàng cụ thể cho từng phần của ứng dụng. Điều này có nghĩa là mỗi thành phần có thể có cửa hàng riêng, chứa trạng thái dành riêng cho thành phần đó. Pinia cũng cung cấp một số tính năng giúp quản lý trạng thái dễ dàng, chẳng hạn như:

• Hỗ trợ Composition API:  API của Pinia được thiết kế để sử dụng với Vue Composition API, giúp dễ dàng tạo và quản lý trạng thái theo cách mô-đun.
• Hỗ trợ TypeScript:  Pinia có hỗ trợ TypeScript tích hợp, giúp bạn dễ dàng viết mã an toàn.
• Hỗ trợ Devtools:  Pinia hỗ trợ Vue Devtools, giúp bạn dễ dàng gỡ lỗi và kiểm tra trạng thái của mình.

Bạn nên sử dụng Pinia hay Vuex?

Mặc dù Pinia đã được công nhận là giải pháp quản lý trạng thái chính thức cho các ứng dụng Vue trong tương lai nhưng điều đó không có nghĩa là Vuex không còn được dùng nữa. Nếu bạn có một ứng dụng đang được sản xuất và sử dụng Vuex thì ứng dụng của bạn sẽ vẫn hoạt động tốt và bạn nên tiếp tục sử dụng Vuex vì việc di chuyển từ thư viện này sang thư viện khác có thể tốn rất nhiều công sức.

Tuy nhiên, nếu dự án của bạn vẫn đang trong giai đoạn phát triển ban đầu thì Pinia là lựa chọn phù hợp. Bạn sẽ được hưởng lợi từ cú pháp dễ hiểu và đơn giản hơn của Pinia cùng với các tính năng khác được đề cập trong bài viết này.

Dưới đây là bảng tóm tắt những điểm khác biệt chính giữa Vuex và Pinia:

Tại sao chọn Pinia thay thế Vuex?

Trong số các ưu điểm của thư viện Pinia, cá nhân mình thấy nó nổi trội nhất ở các điểm sau:

• Kích thước thư viện siêu nhẹ, chỉ khoảng 1kb
• Hỗ trợ module hóa tốt
• Hỗ trợ auto complete khi code tốt. Thay vì phải khai báo mapAction(…), mapGetter(…).v.v…
• Dễ sử dụng, vì cách viết giống như bạn vẫn khai báo và sử dụng state trong từng component vậy.

Và còn nhiều ưu điểm khác nữa. Mình nghĩ sau khi thực hành và ứng dụng vào dự án, bạn sẽ trải nghiệm và nhận ra các ưu điểm này.

Cảm ơn mọi người đã dành thời gian để đọc 🙏

Have a nice day!

The post Vuex vs Pinia: So sánh các thư viện quản lý State Vue appeared first on Tomoshare.

Về việc triển khai refresh token có thể không còn xa lạ đối với nhiều Frontend Dev trong chúng ta. Sau khi đăng nhập thành công, token sẽ được trả lại từ API (Thông thường api sẽ trả về access_token và refresh_token).

Chúng ta sẽ lưu trữ nó lại ở localStorage, cookie, etc… để đính vào headers của mỗi request cho việc xác thực các request mà chúng ta gửi đi.

Khi token này hết hạn, chúng ta sẽ cần gửi một yêu cầu để lấy một token mới bằng việc gửi token hết hạn trước đó hoặc mã refresh_token ban đầu được trả về từ API. Việc này phụ thuộc vào thiết kế API đó.

Trước khi biết khi nào token hết hạn, chúng ta cần đính token vào mỗi request gửi đi. Bạn có thể hình dung việc chúng ta đính token vào mỗi request như thế này, để đảm bảo chúng ta luôn gửi token đến API để xác thực và biết khi nào token sẽ hết hạn (Tránh tự ý kiểm tra token ở client, việc đó không thực sự an toàn).

const axiosClient = axios.create({
  baseURL: process.env.PR_API_HOST,
  headers: {
    'Content-Type': 'application/json',
  },
});

// Add a request interceptor
axiosClient.interceptors.request.use(
  (config) => {
    const storage = useStorage();
    const accessToken = storage.getItem(StorageKeyEnum.AccessToken);
  
    if (accessToken && config.headers) {
      config.headers.Authorization = `Bearer ${accessToken}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

Khi mỗi request cần xác thực được gửi đi với token kèm theo, chúng ta sẽ biết token đó còn hợp lệ hay không bằng việc API sẽ giúp chúng ta xác minh token đó. khi token hết hạn, thông thường chúng ta sẽ nhận được mã phản hồi là 401 hoặc 403.

Khi đó, chúng ta sẽ kiểm tra trên mỗi response nhận về. Nếu nó rơi vào các mã lỗi trên, thực hiện kịch bản refresh token mà chúng ta muốn. Ở bên dưới đoạn code này, hiện tại dự án của mình khi hết hạn token trả về mã lỗi là 401 và kèm theo 1 message Signature has expired nên mình đang thực hiện check theo điều kiện như vậy nhé =)))

axiosClient.interceptors.response.use(
  (response) => response.data,
  async (error) => {
    let message = '';
    const originalConfig = error.config;
    const code = error.response && Number(error.response.status);
    switch (code) {
      case 401:
        if (error.response.data.error === RESPONSE_ERROR_MESSAGE.SIGNATURE_HAS_EXPIRED) {
          // Chúng ta sẽ refresh token tại đây
        break;
      case ...:
        break;
      default:
        message = ErrorHttpMessageEnum.Default;
      
    }
    return message;
  },
);

Tiếp theo, để đảm bảo chỉ một request refresh token được tạo ra khi nhiều request với token hết hạn phát sinh khi tải trang, chúng ta sẽ cần sử dụng Promise để delay và chỉ tạo duy nhất một yêu cầu cuối cùng. Kèm theo đó, là kiểm tra xem có request refresh token nào đã được gọi thông qua biến trạng thái isRefreshing

// refresh token is false, to call refresh token api
if (!isRefreshing) {
// update status isRefreshing to be true
  isRefreshing = true;
  // this method fetches the new token
  refreshTokensLoginApi().then(() => {
    const storage = useStorage();
    const accessToken = storage.getItem(StorageKeyEnum.AccessToken);
    onRefreshed(accessToken);
    // after that, to clear all setup
    refreshSubscribers = [];
    isRefreshing = false;
  });
}

// setup callback to change token in headers authorization
const retryOrigReq = new Promise((resolve) => {
  subscribeTokenRefresh((token: string) => {
    // replace the expired token and retry
    originalConfig.headers.Authorization = `Bearer ${token}`;
    resolve(axiosClient(originalConfig));
  });
});

return retryOrigReq;

const subscribeTokenRefresh = (cb: (token: string) => void) => {
  refreshSubscribers.push(cb);
};

const onRefreshed = (token: string) => {
  refreshSubscribers.map((cb) => cb(token));
};

Ở đây, useStorage() là mình đang viết 1 hook để tương tác get, set, remove token với các storage. Mục đích mình viết hooks để mình tái sử dụng lại cho được nhiều components trong dự án đó, thay vì mình phải viết lại từng nơi. Nó giúp code trong dự án mình tường minh, dễ quản lý hơn, tránh lặp lại code.

Tóm gọn lại, chúng ta sẽ có một hàm refresh token như bên dưới.

import axios from 'axios';
import {
  ErrorHttpMessageEnum, StorageKeyEnum, RESPONSE_ERROR_MESSAGE
} from 'src/constant';
import { refreshTokensLoginApi, clearTokenRedirectLogin } from 'src/helpers/auth';
import { useStorage } from 'src/hooks/useStorage';

let isRefreshing = false;
let refreshSubscribers: ((token: string) => void)[] = [];

const axiosClient = axios.create({
  baseURL: process.env.PR_API_HOST,
  headers: {
    'Content-Type': 'application/json',
  },
});

// Add a request interceptor
axiosClient.interceptors.request.use(
  (config) => {
    const storage = useStorage();
    const accessToken = storage.getItem(StorageKeyEnum.AccessToken);
    
    if (accessToken && config.headers) {
      config.headers.Authorization = `Bearer ${accessToken}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// Add a response interceptor
axiosClient.interceptors.response.use(
  (response) => response.data,
  async (error) => {
    let message = '';
    const originalConfig = error.config;
    const code = error.response && Number(error.response.status);
    
    switch (code) {
      case 401:
        if (error.response.data.error === RESPONSE_ERROR_MESSAGE.SIGNATURE_HAS_EXPIRED) {
          if (!isRefreshing) {
            isRefreshing = true;
            refreshTokensLoginApi().then(() => {
              const storage = useStorage();
              const accessToken = storage.getItem(StorageKeyEnum.AccessToken);
              onRefreshed(accessToken);
              
              isRefreshing = false;
              refreshSubscribers = [];
            });
          }

          const retryOrigReq = new Promise((resolve) => {
            subscribeTokenRefresh((token: string) => {
              // replace the expired token and retry
              originalConfig.headers.Authorization = `Bearer ${token}`;
              resolve(axiosClient(originalConfig));
            });
          });

          return retryOrigReq;
        }
        clearTokenRedirectLogin();

        message = ErrorHttpMessageEnum.Code401;
        break;
      case ...:
        break;
      default:
        message = ErrorHttpMessageEnum.Default;
    }
    return message;
  },
);

const subscribeTokenRefresh = (cb: (token: string) => void) => {
  refreshSubscribers.push(cb);
};

const onRefreshed = (token: string) => {
  refreshSubscribers.map((cb) => cb(token));
};

export default axiosClient;

Kết luận

Có rất nhiều cách để chúng ta triển khai refresh token và phía trên là một trong số cách hiện tại của mình đang sử dụng để refresh token trong dự án. Cảm ơn mọi người đã dành thời gian để đọc 🙏

Have a nice day!

The post Refresh token trong Axios như thế nào? appeared first on Tomoshare.

Trong đó, một trong những tính năng không thể thiếu đó là 2-way data binding, cụ thể là sử dụng v-model.

Nếu chưa từng làm việc với vuejs thì mình sẽ giải thích một cách khái quát giúp bạn hiểu về v-model. Đây là một cách thức mà bạn hay dùng cho các form nhập liệu. Khi mà giá trị của các biến vừa dùng để hiển thị trên input, đồng thời khi người dùng nhập thì nó cũng tự động lưu vào biến đó. Vẫn hơi khó hiểu đúng không, vậy dưới đây là một ví dụ về v-model:

<template>
  <input type="text" v-model="value"/>
  <div>giá trị nhập từ input: <span style="color: red">{{value}}</span></div>
</template>
<script>
export default {
  data() {
    return {
      value: ''
    }
  }
}
</script>

// Input: Đây là giá trị được nhập từ input
// Output: giá trị nhập từ input: Đây là giá trị được nhập từ input

Dễ đúng không. Nhưng tùy vào dự án mà bạn cần tạo các custom input component mà trong đó cần phải xử lý 2-way data binding. Dưới đây là một số cách mà bạn có thể tự implement v-model:

• Watcher một biến local
• Custom method để implement v-model
• Sử dụng thuộc tính computer
•  Custom props và event

1. Watcher một biến local

Đây có lẽ là cách mọi người hay nghĩ tới nhất khi cần implement v-model cho component.

Cách thực hiện đơn giản nhất là gồm những bước sau:

• chúng ta khai báo một props,
• sau đó tạo một biến observable trong data() và khởi tạo giá trị là giá trị của props đã khai báo trước đó
• Cuối cùng là sử dụng event để thông báo cho component cha, mục đích là để update giá trị props từ bên ngoài component.

Nói thì có vẻ trừu tượng vậy thôi, nhưng nhìn code là bạn sẽ thấy nó đơn giản như nào.

<!-- Tạo component CustomInput.vue -->
<template>
  <input type="text" v-model="model" />
</template>

<script>
export default {
  props: ['modelValue'],
  data() {
    return {
      model: this.modelValue
    }
  },
  watch: {
    model(currentValue) {
      this.$emit('update:modelValue', currentValue)
    }
  }
}
</script>

<!-- Cách sử dụng -->
<template>
  <CustomInput v-model="text" />
  <div>giá trị nhập từ input: <span style="color: red">{{text}}</span></div>
</template>
<script>
import CustomInput from './components/CustomInput.vue'
export default {
  components: { CustomInput },
  data() {
    return {
      text: ''
    }
  }
}
</script>

2. Custom method để implement v-model

Nếu sử dụng watcher ảnh hưởng tới hiệu năng của ứng dụng. Vậy cách 2 này sẽ tận dụng event @input có sẵn của input native và tạo một custom method trong component của chúng ta.

Chúng ta sẽ truyền giá trị của input tới component cha thông qua emit một event, mục đích cũng là để có thể cập nhật props từ bên ngoài component.

<!-- Tạo component CustomInput.vue -->
<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
}
</script>

<!-- Cách sử dụng -->
<template>
  <CustomInput v-model="text" />
  <div>giá trị nhập từ input: <span style="color: red">{{ text }}</span></div>
</template>
<script>
import CustomInput from './components/CustomInput.vue'
export default {
  components: { CustomInput },
  data() {
    return {
      text: ''
    }
  }
}
</script>

Lưu ý: Đối với Vue3, thuộc tính value được đổi tên thành modelValue và tên của event input được đổi thành update:modelValue

3. Sử dụng thuộc tính computer

Một cách khác nữa để implement v-model trong một custom component đó là sử dụng getter và setter của computed.

Bạn có thể định nghĩa một thuộc tính computed, sau đó:

• Implement một getter để trả về value của thuộc tính đó.
• Một setter để emit một input event tới component cha

Cụ thể cách viết code như sau:

<!-- Tạo component CustomInput.vue -->
<template>
  <input v-model="value" />
</template><script>
export default {
  props: ['modelValue'],
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  }
}
</script>

<!-- Cách sử dụng -->
<template>
  <CustomInput v-model="text" />
  <div>giá trị nhập từ input: <span style="color: red">{{ text }}</span></div>
</template>
<script>
import CustomInput from './components/CustomInput.vue'
export default {
  components: { CustomInput },
  data() {
    return {
      text: ''
    }
  }
}
</script>

4. Custom props và event

Vì prop và event mặc định của v-model của Vue3 là modelValue và update:modelValue . Tuy nhiên chúng ta có thể biến đổi tên của nó bằng cách truyền đối số cho v-model

<!-- Component cha -->
<CustomInput v-model:title="text" />

Trong trường hợp này, component con sẽ nhận một prop title và một emit một sự kiện update:title để cập nhật lại giá trị ở component cha

<!-- CustomInput.vue -->
<template>
  <input
    type="text"
    :value="title"
    @input="$emit('update:title', $event.target.value)"
  />
</template>
<script>
export default {
  props: ['title'],
  emits: ['update:title']
}
</script>

Kết luận

Trên đây là một số cách để bạn implement v-model trong một component tùy chỉnh mà bạn tự tạo.Tương tự bạn cũng có thể làm với một số type khác của input như radio, checkbox,…

VueJS với ưu điểm nhanh, gọn, nhẹ và tùy biến cao, nên mình nghĩ ngoài những cách trên, sẽ còn nhiều cách khác nữa.

Bạn còn nghĩ ra cách nào khác để implement v-model cho component nữa không? Để lại ý kiến bình luận bên dưới nhé. Mình cũng đang đón chờ đây.

The post Tạo custom input trong vuejs appeared first on Tomoshare.

Tình huống

Bạn đang phát triển một ứng dụng web Vue.js lớn với khách hàng cũng lớn không kém. Một ngày đẹp trời nào đó, khách hàng gửi cho bạn 1 bug mà thoạt nhìn có vẻ đơn giản, tuy nhiên, bạn không thể tái hiện lỗi này trong môi trường phát triển của mình, và bạn không có thông tin rõ ràng về tình trạng lỗi. Trong tình huống này, bạn có thể sử dụng Sentry để giúp xác định và giải quyết lỗi một cách hiệu quả. Vậy cùng mình đi tìm hiểu xem Sentry là gì mà lại lợi hại như vậy.

Sentry là gì

Sentry là một dịch vụ quản lý lỗi (error tracking) và giám sát (monitoring) phần mềm được sử dụng để theo dõi và ghi lại các lỗi và sự cố trong ứng dụng phần mềm. Sentry giúp các nhà phát triển và nhóm phát triển phát hiện, theo dõi, và khắc phục lỗi một cách hiệu quả. Dịch vụ này có thể được tích hợp vào các ứng dụng web và ứng dụng di động để ghi lại thông tin về lỗi, crash, và sự cố xảy ra trong quá trình chạy ứng dụng

Lợi ích của Sentry

• Ghi lại lỗi tự động: Sentry có thể được tích hợp vào mã của bạn để tự động ghi lại thông tin về lỗi mỗi khi nó xảy ra trong môi trường sản xuất. Điều này cho phép bạn nhận được thông báo ngay khi có sự cố xảy ra.
• Thông tin về lỗi chi tiết: Sentry không chỉ ghi lại lỗi mà còn cung cấp thông tin chi tiết về nguồn gốc của lỗi, ngăn chặn lỗi, và cách lỗi xảy ra. Điều này giúp bạn dễ dàng xác định vị trí và nguyên nhân gây ra lỗi.
• Theo dõi thời gian thực: Sentry cung cấp một giao diện quản lý web cho phép bạn theo dõi lỗi trong thời gian thực và tìm hiểu về tần suất và ngữ cảnh xảy ra lỗi.
• Cung cấp stack trace: Sentry có khả năng tạo ra stack trace, cho phép bạn xem các hàm và dòng mã cụ thể liên quan đến lỗi. Điều này giúp bạn tìm ra lỗi trong mã của bạn.
• Thông báo ngay lập tức: Sentry có thể bắn thông báo qua mail, SMS, …

Setup Sentry cho Vue2

Muốn sử dụng Sentry trước tiên bạn cần có tài khoản, vào https://sentry.io/signup/ để đăng ký tài khoản.

Sau khi đăng ký xong và đăng nhập thành công giao diện sẽ hiển thị như sau:

Okay, tiếp theo thì ấn vào nút Create project, trong phần tạo đấy, vì mình đang hướng dẫn cho vue nên hãy chọn vuejs, nhập tên project và nhấn nút Create Project:

Vậy là chúng ta đã tạo xong Project trên Sentry, bước tiếp theo là lấy Client Keys (DSN) để có thể tích hợp vào dự án vuejs, từ Menu -> Projects -> Chọn Project bạn vừa tạo -> Chọn cài đặt bên góc trên bên phải -> Client Keys (DSN)

Cài đặt Sentry cho vue: npm install @sentry/cli

Trong main.js, khởi tạo Sentry.init với dsn chính là Client Keys (DSN) bạn lấy ở bên trên:

import Vue from 'vue'
import App from './App.vue'
import * as Sentry from "@sentry/vue"

Vue.config.productionTip = false

Sentry.init({
  Vue,
  dsn: "https://51b9f7xxxxxxxx.ingest.sentry.io/45059xxxxxxxxx"
});

new Vue({
  render: h => h(App),
}).$mount('#app')

Các bước đã xong, giờ bạn đã có thể test Sentry bằng cách tạo thử 1 Exception.

Khi 1 Exception được thực thi, Sentry sẽ bắt và trả về cho bạn thông tin xoay quanh Exception đó:

Tổng kết

Trên đây là thông tin cũng như hướng dẫn cơ bản để có thể tích hợp Sentry vào dự án vuejs, còn rất nhiều tính năng hay ho nữa như filter bằng trình duyệt, hỗ trợ source map trong việc gửi thông tin stack trace của exception, …. bạn hãy tự mình khám phá thêm nhé, mình đã làm được và mình tin bạn cũng sẽ làm được. Hẹn gặp lại ở bài tiếp theo

The post Sentry.io cho người mới bắt đầu (Vuejs) appeared first on Tomoshare.