vuex-react
Global state manager for React (redux, but vuex like)
Install
npm install --save vuex-react
Usage
Provider
import { Provider } from 'vuex-react'
import App from './App'
const store = {
jane: {
state: {
name: 'Jane',
age: 19,
},
actions: {
makeHerHappy: ({ dispatch, commit }, params) => {
// Make your pickup line...
},
},
},
}
export default () => {
return (
<Provider store={store}>
<App />
</Provider>
)
}
Then you case the store in your child components like this:
import React from 'react'
import {
useStore,
useGetter,
useAction,
mapActions,
mapGetters,
useModule,
} from 'vuex-react'
export default () => {
// you can use . instead of /
// e.g. useGetter('person.name')
const [name, setName] = useGetter('jane/name')
const makeJaneHappy = useAction('jane/makeHerHappy')
const { state, commit, dispatch } = useStore()
// Do your stuff
// name & setName - works as a regular useState, but globally
// makeJaneHappy - you can call it likes this: makeJaneHappy() with just one param
// state - your global state
// commit - can change stuff in your state
// dispatch - calls functions in your state
// vuex like mapGetters & mapActions
const { name } = mapGetters({ name: 'jane/name' })
const { makeJaneHappy } = mapActions({ makeJaneHappy: 'jane/makeHerHappy' })
// useModule hook
// allows you to get all the methods & state from some module
// WARNING methods with the same keys as state are going to be overrided by state
const jane = useModule('jane')
// constant "jane" is an object that has inside:
{
name: 'Jane',
age: 19,
makeHerHappy: function,
}
// you can specify noMerge and then you'll see it like this:
{
state: {
name: 'Jane',
age: 19,
},
methods: {
makeHerHappy: function,
},
}
state.jane.name // Jane
setName('Jane')
makeJaneHappy()
commit('jane/name', 'Emma')
dispatch('jane/makeHerHappy', "<Your Params>")
}
License
MIT © olesh0
