Vue 3 watchers over a store getter #9248
Unanswered
holnone
asked this question in
Help/Questions
Replies: 1 comment
-
Can you provide a minimum reproduction such as a playground or git repository? |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
We are in the process of migrating from Vue 2 to Vue 3 and are having an issue with a current 'watch' process that works just fine in Vue 2, but does not trigger with Vue 3. We have another watch that is looking at single piece of data and that watch is working as expected. That same single piece of data is part of this getter, so we would expect both watch processes to fire if that specific data is updated. The watch that does not work is looking at a array of data. Any thoughts?
In index.js we have the following watch defined.
store.watch(
(state, getters) => getters['ipr/rules/getWatchedAccountRuleValues'],
(watchedValues) => {
store.dispatch('ipr/rules/handleAccountRulesUpdate', watchedValues);
}
);
In the rules.store.js we have the getter defined.
getWatchedAccountRuleValues: (state, getters, rootState) => {
// Wait until all loading is finished before returning the actual data from this watcher.
// Otherwise, when a payment request is loading in, this watcher can fire multiple times.
// If that happens, we can get a race condition when the last/complete call finishes before an earlier and incomplete
// call. Then the results of the earlier/incomplete call overwrites the correct rules.
if (rootState.appBusyList.length !== 0) {
return [];
}
// Loop through the PaymentAccountingLines and return any values whose change should trigger new rules to be fetched.
let watchedValues = [];
rootState.ipr.paymentLines.lines.forEach((paymentLine, paymentLineIndex) => {
paymentLine.paymentAccountingLines.forEach((paymentAccountingLine, paymentAccountingLineIndex) => {
watchedValues.push({
paymentLineIndex,
paymentAccountingLineIndex,
apBusinessUnit: rootState.ipr.header.headerFields.apBusinessUnit.model,
originatingAdminSystemKey: rootState.ipr.header.headerFields.originatingAdminSystem.model,
glAccountNumber: paymentAccountingLine.glAccountId.model,
debitAmount: paymentAccountingLine.debitAmount.model,
});
});
});
return watchedValues;
}
Beta Was this translation helpful? Give feedback.
All reactions