Làm thế nào để du hành thời gian (rollback) trong cây trạng thái bằng Vuex?

Question

Làm thế nào tôi có thể đạt được tính năng du lịch thời gian bằng Vuex? Tôi muốn trở lại trạng thái trước đó, để hoàn tác một cái gì đó.

Có thể thoát khỏi hộp không?

Bất kỳ ý tưởng nào về cách đạt được điều đó?

đã hy vọng cho một cái gì đó giống như store.rollback(1)

Answer 1

Chỉ cần thực hiện nó bằng cách riêng của bạn, thêm một prevState đến cửa hàng của bạn, bạn chỉ có thể chọn những phần mà bạn muốn làm cho nó undo-thể.

Dưới đây là ví dụ đơn giản nhất, mà chỉ hỗ trợ 1 kỷ lục lịch sử:

cửa hàng

const state = { 
    count: 0, 
    prevCount: null 
} 

đột biến:

const INCREMENT = state => { 
    state.prevCount = state.count 
    state.count += 1 
} 

const UNDO = state => { 
    if (state.prevCount !== null) { 
    state.count = state.prevCount 
    state.prevCount = null 
    } 
} 

Nếu bạn cần phải có lịch sử hơn, chỉ cần đặt chúng vào một mảng

const state = { 
    count: 0, 
    countHistory: [] 
} 

và sau đó bạn có thể sử dụng state.countHistory.pop() và state.countHistory.push(xx) để undo/lưu hồ sơ

giải pháp khác là plugin (middleware), trong trường hợp bạn muốn lưu tất cả lịch sử tự động.