Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ejfrancis/Vuex-Alt
An alternative approach to Vuex helpers for accessing state, getters and actions that doesn't rely on string constants.
https://github.com/ejfrancis/Vuex-Alt
flux flux-architecture state-management vue vuex
Last synced: about 1 month ago
JSON representation
An alternative approach to Vuex helpers for accessing state, getters and actions that doesn't rely on string constants.
- Host: GitHub
- URL: https://github.com/ejfrancis/Vuex-Alt
- Owner: ejfrancis
- License: mit
- Created: 2017-06-01T02:34:47.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-11-14T03:50:26.000Z (about 6 years ago)
- Last Synced: 2024-09-19T08:47:12.089Z (3 months ago)
- Topics: flux, flux-architecture, state-management, vue, vuex
- Language: JavaScript
- Size: 71.3 KB
- Stars: 14
- Watchers: 3
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-state - Vuex-Alt
README
# Vuex-Alt
An alternative, opinionated approach to Vuex helpers for accessing state, getters and actions that doesn't rely on string constants.
## Installation
First install the npm package with
```npm install --save vuex-alt```
Then use the plugin, passing in the Vuex Store.
```javascript
import Vuex from 'vuex';
import { VuexAltPlugin } from 'vuex-alt';
// use Vuex as usual
Vue.use(Vuex);
// create your store
const store = new Vuex.Store({ ... });
// use the VuexAltPlugin, and pass it
// the new Vuex Store
Vue.use(VuexAltPlugin, { store });
```
## Prerequisites
Vuex-Alt makes two intentional, opinionated assumptions about your Vuex code:
1. Mutations are only commited from within actions. Components never directly commit mutations. Every mutation has an accompanying action.
2. All Vuex state, getters and actions are organized into [Vuex modules](https://vuex.vuejs.org/en/modules.html).
These two rules lead to more scalable state management code, and more predictable state changes.
## API Usage
Vuex-Alt provides an alternative approach to the Vuex helpers for `mapState`, `mapActions`, and `mapGetters`.
The main difference between the Vuex-Alt helpers and the original Vuex helpers is that instead of accepting strings to specify the namespace and action/getter you want, access is done via functions and nested objects.
### mapState()
Provide an object that maps local Vuex instance properties to Vuex module properties.
For example, if you have a state property called `count` on a Vuex store module called `counter` you would access it like this:
```javascript
computed: {
...mapState({
count: (state) => state.counter.count
})
}
```
### mapActions()
Provide an object that maps local Vuex instance methods to Vuex module methods.
For example, if you have an action called `increment()` on a Vuex store module called `counter` you would access it like this:
```javascript
methods: {
...mapActions({
increment: (actions) => actions.counter.increment
})
}
```
Now you can access it in your component via `this.increment(10)`.
### mapGetters()
Provide an object that maps local Vuex instance properties to Vuex module getters.
For example, if you have a getter called `countPlusTen()` on a Vuex store module called `counter` you would access it like this:
```javascript
computed: {
...mapGetters({
countPlusTen: (getters) => getters.counter.countPlusTen
})
}
```