Giới thiệu Vuex cho người mới bắt đầu

Bài viết được sự cho phép của tác giả Lưu Bình An

Vuex là một cái store cho Vue, nó giống hệt như redux store của React, cũng giải quyết những vấn đề như redux, nên nếu bạn ko biết tại sao nó lại cần thì có thể đọc lại Redux là gì và tại sao phải dùng.

Một số khái niệm chính của Vuex, các khái niệm này gần như là tương đồng với redux

Trong store có

new Vue.Store({
  state: {},
  mutations: {},
  actions: {},
  getters: {},
  modules: {}
});

State

Tất cả dữ liệu mà store nắm giữ

Mutations

mutations được config trong store (nó như reducer của redux) là tập những phương thức được dùng để update state. Chúng ta không update state trực tiếp, không gọi đến các hàm mutation trực tiếp, chúng ta gọi this.$store.commit('ten-phuong-thuc', payload) để gọi các phương thức này.

// gọi mutation
methods: {
  unregister(registration) {
    this.$store.commit({
      type: 'unregister',
      userId: registration.userId
    });
  }
},

// khai báo mutation trong lúc tạo store
mutations: {
  register(state, userId) {
    state.registrations.push(userId);
  },
}

Actions

Nếu trong redux bạn cần một middleware để xử lý các thao tác asynchronous, thì action trong vue store chính là các hàm bạn dùng để làm chuyện này. Chúng ta cũng không gọi trực tiếp đến các hàm của actions mà phải gọi qua dispatch. Mục đích cuối cùng của action cũng là commit một mutation, nó cũng không chỉnh sửa gì state.

// gọi một action ở component, map nó vô phương thức
methods: {
  registerUser(user) {
    this.$store.dispatch('register', user.id);
  }
}

// khai báo action trong store
actions: {
  register(context, userId) {
    setTimeout(() => {
      // vẫn commit lên mutation                
      context.commit('register', userId);
    }, 2000)
  }
}

Getters

Trong store chúng ta khai báo các phương thức gọi chung là getters, nó giống như các computed property của store.

Nếu bạn chưa biết computed property là gì, mình quote lại ngắn gọn cho các bạn nhớ

Ví dụ, giỏ hàng, tổng tiền là computed property được tính lại khi trên tất cả sản phẩm có trong giỏ hàng.

getters: { // == computed properties
  availableProducts(state, getters) {
    return state.products.filter(product => product.inventory > 0)
  },
  cartTotals(state, getters) {
    let cartTotal = 0;
    for (const item of state.cart) {
      cartTotal += (item.price * item.quantity);
    }
    return cartTotal;
  }
},

Modules

Khi ứng dụng của chúng ta lớn lên, để hết mọi quản lý ở một chỗ như vậy sẽ rất mệt. Modules giúp chúng ta tách cái store ra theo từng feature

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> `moduleA`'s state
store.state.b // -> `moduleB`'s state

Các phần còn lại: getters, actions, mutations truy cập trực tiếp như bình thường, KHÔNG cần thông qua store.actions.moduleName. Nó sẽ được lồng vào trong module name khi chúng ta bật namespaced: true

const store = new Vuex.Store({
  modules: {
    account: {
      namespaced: true,
      // module assets
      state: { ... }, 
      getters: {
        isAdmin () { ... } // -> getters['account/isAdmin']
      },
      actions: {
        login () { ... } // -> dispatch('account/login')
      },
      mutations: {
        login () { ... } // -> commit('account/login')
      },
      // nested modules
      modules: {
        // kế thừa namespace từ module cha
        myPage: {
          state: { ... },
          getters: {
            profile () { ... } // -> getters['account/profile']
          }
        },
        posts: {
          namespaced: true,
          state: { ... },
          getters: {
            popular () { ... } // -> getters['account/posts/popular']
          }
        }
      }
    }
  }
})

Bài viết gốc được đăng tải tại vuilaptrinh.com

Có thể bạn quan tâm:

• Validation sẽ trở nên dễ dàng hơn với validatorjs và Vue+Vuex
• Một số Vue.js Resources miễn phí dành cho người mới bắt đầu
• Vue 3 chuẩn bị Release. Điểm mặt những cập nhật đáng mong chờ

Xem thêm các việc làm VueJS hấp dẫn tại TopDev