Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mdartic/vue-reactive-store
A VueX alternative : declarative + reactive + centralized way to structure your data store. Inspired by VueX and Vue.js . Compatible with vue-devtools.
https://github.com/mdartic/vue-reactive-store
state state-management store vue vuejs vuex
Last synced: 17 days ago
JSON representation
A VueX alternative : declarative + reactive + centralized way to structure your data store. Inspired by VueX and Vue.js . Compatible with vue-devtools.
- Host: GitHub
- URL: https://github.com/mdartic/vue-reactive-store
- Owner: mdartic
- License: mit
- Created: 2019-05-06T14:25:13.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-06-02T06:55:13.000Z (over 4 years ago)
- Last Synced: 2024-08-02T03:07:56.545Z (4 months ago)
- Topics: state, state-management, store, vue, vuejs, vuex
- Language: TypeScript
- Homepage:
- Size: 1.07 MB
- Stars: 28
- Watchers: 2
- Forks: 2
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-state - vue-reactive-store - devtools. (vue)
README
## vue-reactive-store
[](https://greenkeeper.io/)
*Vue.js* (only) library for **managing a centralized state**, inspired by Vue.js and VueX.
Without `mutations`, and with async `actions` mutating directly the state.
We could talk about `mutactions`.
Compatible with [`vue-devtools`](https://github.com/vuejs/vue-devtools/) by using a plugin.
This library is in a WIP state.
You can create issues to ask for some features, or if you find bugs.
If feedbacks are goods, I'll write a better documentation :-)
with english examples and take care of this library.
### Core concepts
`vue-reactive-store` is a library trying to make easier
the centralization of your app's data.
A store is composed of :
* a **name**
* a **state**, that will evolve in time (think the `data` of a Vue.js instance)
* **computed** properties based on this state (think the `computed` of a Vue.js instance, or the `getters` for VueX)
* **actions** that will make API calls, mutate the state, ... (think `actions` for VueX, but with `mutations` inside)
* **watch(ers)** that could react to state / computed evolutions (same as `watch` for Vue.js instance)
* **plugins**, trigerred for state evolution, computed properties, actions / watchers trigerred
* **modules**, aka sub-stores, namespaced
* ***props***, like Vue.js instances, but, just an idea for the moment
### Why creating an alternative ?
I think we can do a store simpler than VueX.
With VS Code and Intellisense, I would like my IDE
tell me what's in my store, instead of calling dispatch functions
or mapGetters / mapState functions.
We could trigger actions by importing them directly where we want to use them.
Not by dispatching an action with a string composed by his namespace / function name.
And I think we can do better with TypeScript, to help us with typings.
For the moment, autocompletion is not as good as I want. I'm working on it.
### How to use it
I hope the use of TypeScript will benefit for better understanding.
First, install `vue-reactive-store` in your Vue.js app.
```
npm i vue-reactive-store
```
Add a store as a JS object, and transform it by creating
a `VueReactiveStore` instance.
```js
// src/store.js
import VueReactiveStore from 'vue-reactive-store'
const store = {
state: {
loading: false,
error: null,
data: null
},
computed: {
myCurrentState() {
if (store.state.loading === true) return 'is loading...'
if (store.state.error) return 'error...'
return 'store seems ok'
}
},
actions: {
async fetchData() {
store.state.loading = true
try {
// make api call
const response = await myApi.fetchSomeData()
store.state.data = response
} catch (e) {
store.state.error = e
}
store.state.loading = false
}
},
plugins: [{
actions: {
after(storeName, actionName, storeState) {
console.log('action is finished, this is my store : ', storeState)
}
}
}]
}
const reactiveStore = new VueReactiveStore(store)
export default reactiveStore
```
Finally, use it in your components by importing the store,
and put the data that interest you in the `data` and `computed`
part of your app.
```vue
// src/components/myComponent.js
{{ myCurrentState }}
Data : {{ state.data }}
{{ state.error }}
import store from '../store'
export default {
data: {
state: store.state
},
computed: store.computed,
created() {
store.actions.fetchData()
}
}
```
That sould do the trick, now your store is reactive,
and you could use it in all the component you want by importing
this object.
But, don't import it everywhere, just use it in your 'top-level'
components to facilitate your project maintenability...
**IMPORTANT !**
To use the data, you'll have to wire the `state` property of the `store`.
If you wire `store.state.data`, you'll get `null` and your `data` property isn't reactive yet.
```
import store from '../store'
export default {
data: {
data: store.state.data, // here, you'll always get 'null'
state: store.state // here, state is reactive, and so all children, like data
},
…
}
```
For computed properties or actions, it'll be fine.
You can wire directly the computed property or the action.
### Logger plugin
There is a logger plugin that logs
* each action trigerred (before / after)
* each mutation on the state (after)
* each computed property recomputed (after)
To use it, you can do like this :
```js
// src/store.js
import VueReactiveStore from 'vue-reactive-store'
import VRSPluginLogger from 'vue-reactive-store/dist/index.esm'
const store = {
state: {
loading: false,
error: null,
data: null
},
computed: {
myCurrentState() {
if (store.state.loading === true) return 'is loading...'
if (store.state.error) return 'error...'
return 'store seems ok'
}
},
actions: {
async fetchData() {
store.state.loading = true
try {
// make api call
const response = await myApi.fetchSomeData()
store.state.data = response
} catch (e) {
store.state.error = e
}
store.state.loading = false
}
}
}
VueReactiveStore.registerPlugin(VRSPluginLogger);
const reactiveStore = new VueReactiveStore(store)
// this call will fetch data
// and the VRSPluginLogger will log
// * the action trigerred (before)
// * the state mutations (after)
// * the computed properties (after)
// * the end of the action (after)
store.actions.fetchData()
export default store
```
You can also decide to just log action / state / computed without previous/next state.
```js
// by default all are true and so are verbose logs
VRSPluginLogger.logSettings.actions = false;
VRSPluginLogger.logSettings.computed = false;
VRSPluginLogger.logSettings.state = false;
```
### Devtools plugin
Like VueX, you can debug your store with [vue-devtools](https://github.com/vuejs/vue-devtools/).
It's not enabled 'by default', and you have to explicitly add the devtools plugin like that :
```javascript
import VueReactiveStore from 'vue-reactive-store'
import VRSPluginDevtools from 'vue-reactive-store/dist/devtools.esm'
const store = {
state: {
loading: false,
error: null,
results: null
},
actions: {
async fetchData () {
store.state.loading = true
try {
// blablabla
store.state.results = 'pwet'
} catch (e) {
store.state.error = e
}
store.state.loading = false
}
},
plugins: [
VRSPluginDevtools
]
}
new VueReactiveStore(store)
export default store
```
Then you could observe there is a store detected in the VueX tab of vue-devtools.
**Time Travel** is normally ok, but maybe there are some lacks for **Commit mutations**.
Submit an issue if you find bugs.
### Next episodes
* finishing blog articles (FR)
* release a plugin for storing data in localStorage
* release a plugin for history (undo / redo)
* listen to community needs