Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ktsn/vuex-local
Local state management within Vuex
https://github.com/ktsn/vuex-local
state-management vue vuex
Last synced: 3 months ago
JSON representation
Local state management within Vuex
- Host: GitHub
- URL: https://github.com/ktsn/vuex-local
- Owner: ktsn
- License: mit
- Created: 2016-10-15T07:45:03.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-09T14:06:48.000Z (about 7 years ago)
- Last Synced: 2024-11-13T02:36:50.641Z (3 months ago)
- Topics: state-management, vue, vuex
- Language: TypeScript
- Size: 87.9 KB
- Stars: 64
- Watchers: 6
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vuex-local
[](https://badge.fury.io/js/vuex-local)
[](https://travis-ci.org/ktsn/vuex-local)
Local state management within Vuex
## Why?
Global state management is one of the problems on huge application development. Developers address the problem by using *Flux* pattern and *Single Source of Truth* store like [Redux](https://github.com/reactjs/redux) and [Vuex](https://github.com/vuejs/vuex). They simplify and make trackable application data flow.
However, we sometimes have to manage component local state. Because it is too complicated to manage component specific state on a global store. For addressing local state, we cannot embrace the global store advantage - trackable data flow and time-travel debugging.
vuex-local achieves simple and trackable local state management. We can define a local Vuex module in each component and it will be registered on a Vuex store. This let us use features of [dev tools](https://github.com/vuejs/vue-devtools) such as time-travel debugging for local state. In addition we can use a local module on a component in natural way.
## Example
First, you have to install vuex-local for Vue.js. vuex-local can receive `parentModulePath` option to specify where to register all local modules.
```js
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
import * as VuexLocal from 'vuex-local'
Vue.use(Vuex)
Vue.use(VuexLocal, {
// local modules will be registered under `locals` module
parentModulePath: ['locals']
})
// generate `locals` module automatically
export default new Vuex.Store({})
```
Then, you can define a local module on each component. The component option will have `local` property that is a function returning a local module object.
The local module object is same as normal Vuex module except to have `name` option. The `name` option specify the local module path and the prefix for getters, actions and mutations.
In local module getters and actions, `getters`, `dispatch` and `commit` is namespaced implicitly. In other words, we do not have to care about effects for other global modules. If you want to use root level getters, you can use them from 4th argument of each getter function or `rootGetters` property of the action context.
To dispatch actions or commit mutations in the global namespace, pass `{ root: true }` as the 3rd argument to `dispatch` and `commit`.
```html
// Counter.vue
let uid = 0
export default {
local () {
uid += 1
return {
name: 'counter' + uid,
state: {
count: 10
},
getters: {
half: state => state.count / 2
},
actions: {
asyncIncrement ({ commit }) {
setTimeout(() => {
commit('increment') // this commit can only affect local mutation
}, 1000)
}
},
mutations: {
increment (state) {
state.count += 1
}
}
}
}
}
```
The local modules' state, getters, actions and mutations are bound to component instance automatically. You can use them in the template or other component methods easily.
```js
import store from './store.js'
import Counter from './Counter.vue'
const vm = new Vue({
store,
...Counter
})
vm.count // 10
vm.half // 5
vm.asyncIncrement() // increment after 1000ms
vm.increment() // increment immediately
```
## Testing with vuex-local
Testing vuex-local module can be as easy as ordinary vuex module. Just getting the module by Component.local().
```js
// Use `call` method to inject a mock component
const module = App.local.call({ name: 'counterApp' })
const { state, getters, actions, mutations } = module
```
A full example here:
```js
import App from '../App.vue'
describe('App Local Module', () => {
// Use `call` method to inject a mock component
const module = App.local.call({ name: 'counterApp' })
const { state, getters, actions, mutations } = module
it('counter to be 0 initially', () => {
expect(state.count).to.be.equal(0)
const anotherModule = App.local.call({ name: 'counterApp' })
expect(anotherModule.state.count).to.be.equal(0)
})
it('return half', () => {
expect(getters.half({ count: 0 })).to.be.equal(0)
expect(getters.half({ count: -1 })).to.be.equal(-0.5)
expect(getters.half({ count: 1 })).to.be.equal(0.5)
})
it('increment the counter in state', () => {
const state = { count: 0 }
mutations.increment(state)
expect(state.count).to.be.equal(1)
mutations.increment(state)
expect(state.count).to.be.equal(2)
})
it('increment after 1 second', done => {
this.timeout(1100)
const begin = Date.now()
const commit = mutationName => {
expect(mutationName).to.be.equal('increment')
expect(Date.now() - begin).to.be.above(900)
expect(Date.now() - begin).to.be.below(1100)
done()
}
actions.asyncIncrement({ commit })
})
})
```
## License
MIT