VueJS: Plugin

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Store Vuex chấp nhận tùy chọn plugins hiển thị hook cho mỗi mutation. Plugin Vuex chỉ đơn giản là một hàm nhận store làm đối số duy nhất:

const myPlugin = store => {
  // called when the store is initialized
  store.subscribe((mutation, state) => {
    // called after every mutation.
    // The mutation comes in the format of `{ type, payload }`.
  })
}

Và có thể được sử dụng như thế này:

const store = new Vuex.Store({
  // ...
  plugins: [myPlugin]
})

#Commit mutation bên trong plugin

Plugin không được phép trực tiếp thay đổi state - tương tự như component của bạn, chúng chỉ có thể kích hoạt các thay đổi bằng cách thực hiện các mutation.

Bằng cách thực hiện các mutation, một plugin có thể được sử dụng để đồng bộ hóa nguồn dữ liệu với store. Ví dụ: để đồng bộ hóa nguồn dữ liệu websocket với store (đây chỉ là một ví dụ giả định, trong thực tế thì hàm createWebSocketPlugin có thể mất một số tùy chọn bổ sung cho các tác vụ phức tạp hơn):

export default function createWebSocketPlugin (socket) {
  return store => {
    socket.on('data', data => {
      store.commit('receiveData', data)
    })
    store.subscribe(mutation => {
      if (mutation.type === 'UPDATE_DATA') {
        socket.emit('update', mutation.payload)
      }
    })
  }
}
const plugin = createWebSocketPlugin(socket)

const store = new Vuex.Store({
  state,
  mutations,
  plugins: [plugin]
})

#Chụp nhanh state

Đôi khi, một plugin có thể muốn nhận "chụp nhanh" của state và cũng so sánh state sau mutation với state trước mutation. Để đạt được điều đó, bạn sẽ cần phải thực hiện một bản sao sâu về đối tượng state:

const myPluginWithSnapshot = store => {
  let prevState = _.cloneDeep(store.state)
  store.subscribe((mutation, state) => {
    let nextState = _.cloneDeep(state)

    // compare `prevState` and `nextState`...

    // save state for next mutation
    prevState = nextState
  })
}

Các plugin có ảnh chụp nhanh state chỉ được sử dụng trong quá trình phát triển. Khi sử dụng webpack hoặc Browserify, ta có thể cho phép các công cụ xây dựng của ta xử lý điều đó:

const store = new Vuex.Store({
  // ...
  plugins: process.env.NODE_ENV !== 'production'
    ? [myPluginWithSnapshot]
    : []
})

Plugin sẽ được sử dụng theo mặc định. Phục vụ production, bạn sẽ cần DefinePlugin cho webpack hoặc envify cho Browserify để chuyển đổi các giá trị của process.env.NODE_ENV !== 'production' thành false cho việc xây dựng chính thức.

#Built-in Logger Plugin

Nếu bạn đang sử dụng vue-devtools bạn có thể không cần điều này.

Vuex đi kèm với một plugin logger để sử dụng gỡ lỗi phổ biến:

import createLogger from 'vuex/dist/logger'

const store = new Vuex.Store({
  plugins: [createLogger()]
})

Các hàm createLogger phải mất một vài lựa chọn:

const logger = createLogger({
  collapsed: false, // auto-expand logged mutations
  filter (mutation, stateBefore, stateAfter) {
    // returns `true` if a mutation should be logged
    // `mutation` is a `{ type, payload }`
    return mutation.type !== "aBlacklistedMutation"
  },
  transformer (state) {
    // transform the state before logging it.
    // for example return only a specific sub-tree
    return state.subTree
  },
  mutationTransformer (mutation) {
    // mutations are logged in the format of `{ type, payload }`
    // we can format it any way we want.
    return mutation.type
  },
  logger: console, // implementation of the `console` API, default `console`
})

Tệp nhật ký cũng có thể được đưa vào trực tiếp qua thẻ <script> và sẽ hiển thị hàm createVuexLogger dạng global.

Lưu ý plugin trình ghi nhật ký có ảnh chụp nhanh state, vì vậy chỉ sử dụng nó trong khi phát triển.

» Tiếp: Chế độ strict
« Trước: Cấu trúc ứng dụng
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!