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.