Vuex: Beobachten Sie die Logik im Zustand

Question

Ich weiß nicht, wie ich meine Vuex-Shop mit dem folgenden Problem zu organisieren.

Ich habe eine Reihe von Tasten/Aktionen, wie 100 von ihnen. Sie sind im Geschäft wie folgt organisiert:

buttons: [ 
    { 
    text: 'Button 1', 
    doAction (store) {}, 
    mustShow (store) { 
     return state.variable > 10 && state.variable2.counter < 12 && !state.variable3 
    } 
    } 
    ... 
] 

ich sie einfach in meiner Ansicht angezeigt werden kann und verknüpfen ihre Aktion auf das Click-Ereignis:

<button v-for"button in buttons" @click="button.doAction()"></button> 

Das Problem ist, dass jeder Knopf angezeigt werden kann oder nicht basiert auf willkürlicher komplexer Logik, die es nur kennt, wie Sie in der mustShow Funktion sehen können. Jede Taste hat ihre eigene Logik.

Ich kann leicht einen Getter machen, die nur die Tasten, deren mustShow Funktion gibt wahr haben nur die Aktionen zurück, die in einem bestimmten Zustand des Ladens angezeigt werden müssen:

availableActions (state) { 
    return state.buttons.filter(s => s.mustShow()) 
} 

Dies funktioniert das erste Mal, aber das Problem ist, dass dieser Getter natürlich nicht reaktiv ist, da er nicht an Variablen, sondern an das Ergebnis einer Funktion gebunden ist, die nicht reaktiv ist.

Wie würden Sie den Code organisieren, damit dies funktioniert? Natürlich könnte man die gesamte Anzeigelogik für alle Knöpfe in einen einzigen Getter setzen. Was aber, wenn der Name der Schaltfläche auch dynamisch sein soll (als Ergebnis einer Funktion, die ihren Wert anhand beliebiger Variablen im Zustand berechnet)?

Dank

Answer 1

Ich glaube, Sie die falsche Art und Weise hier gehen: Als Faustregel sollten Sie nicht komplexe Objekte, wie Funktionsdefinitionen, die Definition eines Shops Zustand. Eine Denkweise über den Geschäftszustand ist, dass es etwas sein sollte, das man in JSON verschlüsseln kann, es einem Freund geben kann, und dann sollte dein Freund, wenn er es zurück analysiert und es im selben Programm benutzt, dasselbe Ergebnis erhalten, So eindeutig wird eine Funktion im Staat nicht dazu passen.

wäre mein Vorschlag, wie etwas zu tun:

const state = { 
    buttons: [ 
    { 
    text: 'Button 1', 
    id: 1 
    }, 
    ... 
    ] 
} 
... 
const actions = { 
    doAction ({commit}, {btnId}) { 
    // now you perform the action you want to do 
    ... 
    // finally if you want to change the state of your store you 
    // should commit a mutation, *do not change the state here!* 
    // let the mutation do their job 
    // here you put all the things the mutation may need to perform 
    // the change of the state 
    const payload = { btnId } 
    commit(changeSomethingInState, { payload }) 
    } 
} 

const mutations = { 
    changeSomethingInState (state, { payload }) { 
    state.something = payload 
} 
... 

Dies ist im Laden Definition. Jetzt in Ihrer Sicht Sie mögen:

<button v-for"button in buttons" @click="dispatch('doAction', { btnId: button.id })"/>