Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/chlab/vuex-action-reload

A vuex plugin that reloads actions when a condition is met
https://github.com/chlab/vuex-action-reload

vue vue2 vuejs vuejs2 vuex vuex2

Last synced: about 1 month ago
JSON representation

A vuex plugin that reloads actions when a condition is met

Lists

README 

        
# vuex-action-reload



[![npm version](https://badge.fury.io/js/vuex-action-reload.svg)](https://badge.fury.io/js/vuex-action-reload)

[![Build Status](https://travis-ci.org/chlab/vuex-action-reload.svg?branch=master)](https://travis-ci.org/chlab/vuex-action-reload)



A vuex plugin that reloads actions when a condition is met.



This handles the situation where a certain change in the vuex store requires other

parts of the store to change. Ideally, the parts that should change are handled

by dispatching actions (e.g. calling a remote API).



An example of this would be changing the locale of your app, thus requiring a

reload of all locale-dependent parts of your vuex store.



## Installation



```

npm install vuex-action-reload

```



## Usage



```

import createVuexReloadPlugin from 'vuex-action-reload'



const store = new Vuex.Store({

  // ...

  plugins: [

    createVuexReloadPlugin({

      actions: ['loadNews', 'Posts/loadLatest'],

      condition: mutation => mutation.type === 'Locale/setLocale'

      })

    ]

})



```



In this example, the actions `loadNews` and `Posts/loadLatest` will be dispatched

every time a mutation of `Locale/setLocale` occurs.



## API



```

createVuexReloadPlugin([options])

```



Creates a new instance of the plugin with the given options.

The following options can be provided to configure the plugin for your specific needs:



* `actions ` an array of actions that should be "reloaded" (dispatched)

when `condition` is met



* `condition ` A function returning a Boolean deciding which store mutations

should trigger a reload of `actions`. This function receives an object from vuex

containing `type` (name of mutation) and `payload` (the payload the mutation receives).



## Credits



Thank you to [Robin van der Vleuten](https://www.robinvdvleuten.nl/) for the inspiration

from his [vuex-persistedstate](https://github.com/robinvdvleuten/vuex-persistedstate) plugin.



## License



MIT © Christof Leuenberger