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

Sử dụng Vuex Class Component trong Nuxtjs

0 0 58

Người đăng: Le Ngoc Son

Theo Viblo Asia

1. Vuex Class Component

Vuex class component(VCC) là 1 thư viện giúp bạn viết Vuex Module hoặc Store sử dụng ES6 Classes và ES7 Decorators. Mục đích chính của VCC là:

  • Giúp bạn viết Vuex Modules dễ dàng hơn.
  • Cung cấp proxy cho getters, mutations, và actions
  • Tạo ra Vuex Manager giúp bạn gọi tất cả các methods của Vuex dễ dàng hơn

Ví dụ khi bạn muốn gọi 1 commit trong vuex, bạn sẽ cần phải nhớ namespace của module:

this.$store.commit('foo/bar/doSomething', var);

Khi bạn dùng VCC

vxm.foo_bar.doSomething(var);

Có thể dễ dàng thấy được nếu dùng VCC thì code của chúng ta sẽ dễ đọc hơn so với cách truyền thống. Các bạn có thể đọc chi tiết hơn ở đây https://github.com/michaelolof/vuex-class-component

2. Cài đặt

  • Cài đặt nuxt
yarn create nuxt-app nuxt-demo

  • Cài đặt Vuex Class Component
yarn add vuex-class-component
  • Tạo folder user và file index.js trong folder store
import { createModule } from 'vuex-class-component'; const VuexModule = createModule({ namespaced: "user", strict: false, target: "nuxt",
}) export class UserStore extends VuexModule { firstname = "Son"; lastname = "Le"; get fullname() { return this.firstname + " " + this.lastname; }
} 
  • Tạo file index.js trong folder store
import { Store } from 'vuex';
import { UserStore } from '~/store/user';
import { extractVuexModule } from 'vuex-class-component'; export default function () { return new Store({ modules: { ...extractVuexModule( UserStore ) } });
} 
  • Tạo file store_proxy.js trong folder plugins
import { UserStore } from '~/store/user';
import { createProxy } from 'vuex-class-component'; export let storeProxy; export default function ({ store }) { storeProxy = { user: createProxy(store, UserStore) }
} 
  • Thêm store_proxy vào nuxt.config,js
plugins: [ '~/plugins/store_proxy'
],
  • Sửa lại file index.vue trong folder pages
<template> <div class="container"> <input v-model="user.firstname"> <input v-model="user.lastname"> <h1>{{ fullname }}</h1> </div>
</template>
<script>
import { storeProxy } from '~/plugins/store_proxy'; export default { data() { return { user: storeProxy.user, } }, computed: { fullname() { return storeProxy.user.fullname; } }
}
</script> 

Chạy lệnh yarn dev và mở http://localhost:3000/ để xem kết quả. Khi bạn sửa firstname hoặc lastname trên input, state sẽ tự động được update lại mà ko cần phải chạy commit.

Bình luận

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

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

Tìm hiểu về NuxtJS (P3) - Page

1. Mở đầu. . Chào mừng các bạn đến với phần ba trong loạt bài viết tìm hiểu về NuxtJS.

0 0 73

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

Google Login trong Nuxtjs

1. Auth. Authenticate là thứ rất quen thuộc của mỗi app, trong bài viết này mình sẽ giới thiệu auth module dành cho nuxt giúp bạn xử lý công việc này rất nhanh và dễ dàng. Trước hết là cài nuxt.

0 0 129

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

Tìm hiểu về NuxtJS (P2) - Routing & Middleware

1. Mở đầu. . Chào mừng các bạn đến với part 2 của series bài viết tìm hiểu về NuxtJS, trong bài viết trước mình đã giới thiệu qua về NuxtJS, cách cài đặt, cấu trúc thư mục và config cơ bản có trong file nuxt.

0 0 174

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

Tìm hiểu về NuxtJS (P1)

1. Mở đầu. . Trước đây mình có một bài viết giới thiệu về NextJS - một framework hỗ trợ chúng ta thực hiện server-side rendering với ReactJS nếu bạn chưa đọc thì có thể xem qua tại đây.

0 0 96

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

Quản lý và sử dụng API trong Nuxt bằng cách sử dụng Repository Pattern

Mở đầu năm mới, à nhầm, mở đầu bài viết. Cái tên NuxtJS chắc hẳn cũng không còn xa lạ gì với những bạn yêu thích VueJS nữa, đương nhiên mình cũng là một chàng trai dành tình yêu to lớn cho frameworks này.

0 0 210

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

asyncData và fetch trong Nuxt JS khác nhau như nào?

Mở đầu. Khi làm việc với NuxtJS chắc hẳn chúng ta đều sẽ nghe thấy đâu đó hai khái niệm này là fetch và asyncData. Vậy hai phương thức này nó giống nhau và khác nhau như nào? Khi nào nên sử dụng từng phương thức cho phù hợp. .

0 0 57