vuex-connectはVuexでReduxのconnectのようにstoreとコンポーネントを繋ぐやつ。
www.npmjs.com
コンポーネントとstoreを繋ぐ部分を切り離せて宣言的に書けて気に入ってる。mapStateとかVuexが用意してるやつ使わなくてもstoreの値を取り出せて注入できる。
namespacedなmoduleを繋ぐとき
たとえば次のようなstoreがあったとき
const store = new Vuex.Store({
state: {
foo: 'foo',
},
modules: {
moduleName: {
namespaced: true,
state: {
bar: 'bar',
},
mutations: {
barMutation(state, payload) {
state.bar = payload
},
},
actions: {
barAction({ commit }, payload) {
commit('barMutation', payload)
},
},
getters: {
barbar: state => state.bar + state.bar,
},
},
},
})
vuex-connectではこう、関数で書いて階層たどってreturn。
import { connect } from 'vuex-connect'
import MyComponent from './MyComponent'
export default connect({
stateToProps: {
foo: 'foo',
bar: state => state.moduleName.bar,
},
})(MyComponent)
mapXxxxxぽく書きたいからヘルパー作った
数が少なければいいんだけど多くなってくると毎回namespaceの階層まで記述するのめんどい、のでヘルパー関数作った。
www.npmjs.com
import { connect } from 'vuex-connect'
import { stateToProps } from 'vuex-connect-namespace-helper'
import MyComponent from './MyComponent'
export default connect({
stateToProps: {
foo: 'foo',
...stateToProps('moduleName', {
bar: 'bar',
}),
},
})(MyComponent)
mapXxxxxとかと同じように1つ目の引数にnamespaceを指定、そのあとそのmoduleのlocal stateを指定する。
ヘルパーがやってるのは指定されたnamespaceとstate名をいい感じにマッピングして、moduleのstateを返す関数に変換してるだけ。
内部的にやってることはほぼ同じだけど一応わけてある。
helperFunction(namespace, options) -> Object
stateToPropsgettersToPropsmutationsToEventsmutationsToPropsactionsToEventsactionsToProps
vuex-connectおすすめ
VuexのmapXxxxxを無計画に使ってるとつらみになりがちで
- storeと密結合になるから
mapXxxxxをpresentationなコンポーネントには使いたくない
- コンポーネントごとに小さなcontainerを都度作るのつらい
- pageレベルのcontainerにやらせると
mapXxxxxが増えまくってつらい
- コンポーネントの
$emitをバケツリレーしてcontainerでmapMutationsとかした処理呼ぶのつらい
とかとか。
この辺りをスッと綺麗に書けるようになるので、Vuex使う人は一度試してみるのおすすめです。
starください。
github.com
github.com
