Jak podróżować w czasie (wycofywanie) w drzewie stanu za pomocą Vuex?

Question

Jak uzyskać funkcję podróżowania w czasie za pomocą Vuex? Chcę wrócić do poprzedniego stanu, aby coś cofnąć.

Czy to możliwe po wyjęciu z pudełka?

Każdy pomysł, jak to osiągnąć?

Liczyłem na coś jak store.rollback(1)

Answer 1

Wystarczy wdrożyć go przez własną rękę, dodać prevState do sklepu, można wybrać tylko te części, które chcesz, aby cofnąć-stanie.

Oto najprostszy przykład, który obsługuje tylko 1 rekord Historia:

sklepu

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

mutacje:

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

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

Jeśli chcesz mieć więcej historii, po prostu umieść je w tablicy

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

a następnie można użyć state.countHistory.pop() i state.countHistory.push(xx) cofnąć/zapisać rekordy

Innym rozwiązaniem jest plugin (middleware), w przypadku chcesz zapisać całą historię automatycznie.