Vuex là một giải pháp quản lý trạng thái cho các ứng dụng Vue.js

Mỗi ứng dụng Vuex đều có một store (cửa hàng), nơi lưu trữ hầu hết các trạng thái (state) của ứng dụng

Vuex giúp giải quyết vấn đề giao tiếp giữa các bộ phận (component). Ví dụ, hai bộ phận cùng cấp có thể trao đổi dữ liệu với nhau

Giải thích简 đơn:

Khi một dữ liệu được định nghĩa trong state, nó có thể được truy cập và sửa đổi từ bất kỳ bộ phận nào trong dự án, và mọi thay đổi đều được cập nhật toàn cầu

Sự khác biệt giữa Vuex và một đối tượng toàn cầu đơn giản?

1）Trạng thái lưu trữ của Vuex là phản ứng (reactive)

Khi các bộ phận Vue đọc trạng thái từ store, việc thay đổi trạng thái trong store sẽ kích hoạt cập nhật hiệu quả cho các bộ phận tương ứng

2）Không thể sửa đổi trực tiếp trạng thái trong store

Điều kiện duy nhất để sửa đổi trạng thái store là thông qua các hàm mutation được gọi một cách rõ ràng, giúp theo dõi mọi thay đổi trạng thái

Các trường hợp sử dụng Vuex:

Phù hợp với các ứng dụng SPA trung bình đến lớn

Các trang phức tạp, một dữ liệu được nhiều trang hoặc tuyến đường (router) chia sẻ (trao đổi lẫn nhau), giao tiếp dữ liệu多 cấp

File min.js:

import Vue from 'vue' // Nhập thư viện Vue
import App from './App.vue' // Nhập bộ phận chủ
import myStore from './store/store' // Nhập store quản lý trạng thái

// Tạo một实例 Vue
new Vue({
    render: h => h(App), // Rendering bộ phận App
    store: myStore // Ghim store lên实例 Vue
}).$mount('#app')

Tạo file store.js trong thư mục store:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) // Sử dụng Vuex

const myStore = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        tang(state) { // Hàm để tăng count
            state.count += 1
        }
    }
})

export default myStore

Các bước sử dụng Vuex

1、Cài đặt

npm install vuex --save

2、Nhập thư viện (trong file store.js)

import Vue from 'vue'
import Vuex from 'vuex'

3、Sử dụng thư viện

Vue.use(Vuex)

4、Tạo实例 store

const myStore = new Vuex.Store({
    state: {
        // Định nghĩa các trạng thái ban đầu
    },
    mutations: {
        // Các hàm để sửa đổi trạng thái
        tang(state) { // Hàm sửa đổi count
            state.count += 1
        }
    }
})

5、Ghim store lên ứng dụng (trong file min.js)

new Vue({
  render: h => h(App),
  store: myStore // Ghim store lên ứng dụng
}).$mount('#app')

Quản lý trạng thái

Biểu đồ luồng dữ liệu một chiều (không thể sửa đổi trạng thái từ nhiều hướng)

Thay đổi dữ liệu chỉ thông qua các Actions (Actions lại thông qua Mutations)

Thay đổi trạng thái ảnh hưởng đến giao diện, và các thay đổi giao diện phải thông qua Actions để thực hiện

Các模块 chính của Vuex

• State: Truy cập đối tượng trạng thái
• Mutation: Sửa đổi trạng thái
• Getter: Tính toán và lọc dữ liệu
• Action: Sửa đổi trạng thái một cách asynchronous
• Module: Tách các phần tử thành các模块

Mỗi module đều có các hàm trợ giúp tương ứng (để đơn giản hóa)

Các hàm như mapState, mapMutation, mapGetter, mapAction

Trước khi sử dụng cần nhập các hàm này:

import { mapState, mapMutation } from 'vuex'

State

Là dữ liệu cơ bản trong Vuex

Vuex sử dụng một cây trạng thái duy nhất (một đối tượng chứa toàn bộ trạng thái)

const myStore = new Vuex.Store({
    state: {
        count: 0
    }
})

const app = new Vue({
    store: myStore,
    computed: {
        count() {
            return this.$store.state.count
        }
    }
})

Mutations

Tất cả các hàm trong Mutations đều là synchronous

Chỉ có Mutations mới có thể sửa đổi trạng thái state

Muốn Mutations được kích hoạt, cần sử dụng this.$store.commit('tên_hàm')

Mỗi Mutation có một loại sự kiện (type) và một hàm xử lý (handler)

Hàm xử lý chính là nơi sửa đổi trạng thái, nhận state làm tham số đầu tiên

Getter

Getter có thể派 sinh các trạng thái từ state

Getter nhận state làm tham số đầu tiên, có thể nhận các getter khác làm tham số thứ hai (nếu cần)

Cũng có thể truy cập thông qua computed của Vue

Getter tương tự như computed của Vue, luôn thực thi một lần khi khởi tạo

Trường hợp sử dụng:

Khi dữ liệu thay đổi cần kích hoạt một hành động nào đó

Action

Action tương tự như Mutation

Khác biệt:

1、Action có thể chứa các hành động asynchronous, trong khi Mutation là synchronous

2、Action gọi Mutation thông qua commit, không thể sửa đổi trạng thái trực tiếp

Action được kích hoạt thông qua hàm dispatch của store

actions: {
    hanhDong($store, params) {
        $store.commit('tang', params)
    }
}

Kích hoạt Action trong bộ phận:

this.$store.dispatch('hanhDong', duLieu)

Trường hợp sử dụng:

Khi dữ liệu cần được nhiều bộ phận truy cập và là dữ liệu nhận từ server (asynchronous), cần sử dụng Action

Module

Sử dụng một cây trạng thái duy nhất có thể khiến đối tượng trạng thái trở nên lớn và rườm rà

Vuex cho phép tách store thành các module (module), giải quyết vấn đề này

Mỗi module có thể có state, mutations, actions, getters riêng

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

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

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

myStore.state.a // Truy cập state của moduleA
myStore.state.b // Truy cập state của moduleB

Ý tưởng của Vuex: Khi người dùng click một nút, nó kích hoạt một Action, Action sau đó gọi một Mutation, Mutation sửa đổi state, state thay đổi ảnh hưởng đến giao diện