Skip to content

Commit 776a331

Browse files
authored
add advanced documentation
1 parent 54e851e commit 776a331

File tree

1 file changed

+20
-13
lines changed

1 file changed

+20
-13
lines changed

README.md

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -290,25 +290,32 @@ import { mapWaitingActions, mapWaitingGetters } from 'vue-wait'
290290

291291
```
292292

293-
##### 😱 What happened to old `createActionHelpers`?
293+
### ☢️Advanced Getters and Actions Usage
294294

295-
**We've removed them**. Since they were just calling `dispatch`, you can just write like following example. We don't like complexity.
295+
> The Vuex module name is `wait` by default. If you've changed on config, you should get it by `rootGetters['<vuex module name>/is']` or `rootGetters['<vuex module name>/any']`.
296296
297-
```js
298-
//...
299-
actions: {
300-
async getUsers({ dispatch }) {
301-
const waiter = 'getting users';
297+
You can access `vue-wait`'s Vuex getters using `rootGetters` in Vuex.
302298

303-
dispatch(`wait/start`, waiter, { root: true });
304-
await UserService.getUsers();
305-
dispatch(`wait/end`, waiter, { root: true });
299+
```
300+
...
301+
getters: {
302+
cartOperationInProgress(state, getters, rootState, rootGetters) {
303+
return rootGetters['wait/is']('cart.*');
306304
}
307-
}
308-
//...
305+
},
309306
```
310307

311-
**Using `mapWaitingActions` or `waitFor` instead is a better way.**
308+
And you can start and end loaders using `wait` actions. You must pass `root: true` option to the `dispatch` method.
309+
310+
```js
311+
actions: {
312+
async addItemToCart({ dispatch }, item) {
313+
dispatch('wait/start', 'cart.addItem', { root: true });
314+
await CartService.addItem(item);
315+
dispatch('wait/end', 'cart.addItem', { root: true });
316+
}
317+
},
318+
```
312319

313320
#### `waitFor(loader String, func Function, [,force_sync = false])`
314321

0 commit comments

Comments
 (0)