Một số thủ thuật có thể bạn không biết trong VueJS
vuejs
8
White

Thanh Phong viết ngày 31/10/2018

VueJS, ReactJS, Angular đang là bộ ba framework javascript làm mưa làm gió những năm gần đây. Nên nếu các bạn đang đọc bài viết này thì mình nghĩ các bạn đều đã quen thuộc với Vue và biết Vue là gì, nên mình sẽ không mất thời gian giới thiệu nữa mà sẽ đi thẳng vào vấn đề chính luôn :smile:, đó là các thủ thật làm việc với Vue mà mình nghĩ khá hữu ích và giải quyết được nhiều trường hợp rất hay gặp

Smarter Watcher

Chắc hẳn trong đây có rất nhiều bạn đã từng làm 1 số task kiểu như: khi mới load trang gọi hàm lấy ra item từ server, khi ng dùng gõ từ khóa tìm kiếm item, gọi lại hàm lấy item, trước đấy khi mới học vue mình thường làm thế này:

created() {
  this.fetchItemList();
},
watch: {
  searchItem() {
    this.fetchItemList();
  }
}

Nhưng thực ra có thể viết gọn lại thế này:

watch: {
  searchItem: {
    handler: 'fetchItemList',
    immediate: true
  }
}

Vậy là ngoài cách khai báo watcher như 1 hàm, chúng ta cũng có thể khai báo watcher là 1 object gồm có 2 thuộc tính là handler: tên hàm cần gọi khi searchItem thay đổi, và immediate: true để thực hiện gọi hàm ngay lập tức khi vừa mới load trang.

Autoload Component

Trong 1 số trường hợp, khi có nhiều component cần sử dụng ở nhiều nơi nhưng bạn lại ko muốn khai báo component đó thành global, khi đó các bạn sẽ làm thế nào?
Ví dụ chúng ta có 3 component là: BaseButton, BaseIcon, BaseInput. Bình thường khi muốn sử dụng chúng ta phải làm thế này:

import BaseButton from './base-button';
import BaseIcon from './base-icon';
import BaseInput from './base-input';

export default {
    components: {
        BaseButton,
        BaseIcon,
        BaseInput
    }
};

Việc lặp đi lặp lại công việc này sẽ rất gây mất thời gian và nhàm chán, cho nên bạn có thể sử dụng kỹ thuật sau để Vue tự động import component cần dùng đến.
Ở trong file main.js khai báo như sau:

import Vue from 'vue';
import upperFirst from 'lodash/upperFirst';
import camelCase from 'lodash/camelCase';

const requireComponent = require.context(
    '.', false, /base-[\w-]+\.vue$/ // load những file bắt đầu = base- và kết thúc là .vue
);

requireComponent.keys().forEach(fileName => {
    const componentConfig = requireComponent(fileName);

    // lấy pascal name của component
    const componentName = upperFirst(
        camelCase(fileName.replace(/^\.\//, '').replace(/\.\w+$/, ''))
    )

    Vue.component(componentName, componentConfig.default || componentConfig)
});

Với đoạn code trên chúng ta có thể sử dụng ngay 3 component là BaseButton, BaseIcon, BaseInput trong ví dụ mà ko cần import trong các component.

Cleaner Views

data() {
    return {
        loading: false,
        error: null,
        post: null
    };
},
watch: {
    '$route': {
        handler: 'resetData',
        immediate: true
    }
},
methods: {
    resetData() {
        this.loading = false;
        this.error = null;
        this.post = null;
        this.getPost(this.$route.params.id);
    },
    getPost(postId) {
        // code get post here
    }
}

Chắc hẳn đây cũng là đoạn code quen thuộc với rất nhiều bạn. Mục đích của đoạn code trên là để lấy post mới và reset lại data về trạng thái ban đầu mỗi khi id trên route thay đổi. Vd bạn khai báo 1 route là: http://example.com/post/:id có component là post.vue. Vì id là 1 url query params và việc thay đổi url query params ko làm thay đổi hay load lại component trong vue, nên component post sẽ được giữ nguyên và cả trạng thái của nó cũng vậy. Để có thể thay đổi trạng thái của nó về ban đầu bạn phải theo dõi biến $route thay đổi và gọi hàm resetData mỗi lần route hay id thay đổi. Chúng ta có thể rút gọn đoạn code trên lại như sau:

data() {
    return {
        loading: false,
        error: null,
        post: null
    };
},
created() {
    this.getPost(this.$route.params.id);
}
methods: {
    getPost(postId) {
        // code get post here
    }
}

// và thêm đoạn sau trong file App.vue hoặc file layout cha của component post
<router-view :key="$route.fullPath"></router-view>

Gọn hơn rất nhiều đúng ko nào :smiley:
Hy vọng các bạn thích những gì mình chia sẻ. Hẹn các bạn trong những bài viết sau :smiley:

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Thanh Phong

1 bài viết.
0 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Bài viết liên quan
White
8 0
_Có mấy chia sẻ nhỏ, mình muốn đưa ra để mọi người cùng thảo luận góp ý. Thread này không tập trung vào Technical nữa mà discuss về Coding Style & ...
Hùng Phong viết 8 tháng trước
8 0
Male avatar
3 2
Nay mình xin chia sẻ với mọi người cách tạo một ứng dụng chat bằng ngôn ngữ lập trình Nodejs + Vuejs để xây dụng ứng dụng chat Đầu tiên bạn cần ph...
skipperhoa viết 1 năm trước
3 2
White
1 0
Bản VueCLI 3, khi tạo project mới bằng vue create project_name, sẽ không tự động generate ra file vue.config.js nữa (optional), mà phải tự tạo thủ ...
Lâm Ngô viết 3 tháng trước
1 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
1 bài viết.
0 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!