add mapState & mapMutations

Author: yyx990803

src/helpers.js

@@ -1,3 +1,24 @@
+export function mapState (map) {
+  const res = {}
+  Object.keys(map).forEach(key => {
+    const fn = map[key]
+    res[key] = function mappedState () {
+      return fn.call(this, this.$store.state)
+    }
+  })
+  return res
+}
+
+export function mapMutations (mutations) {
+  const res = {}
+  normalizeMap(mutations).forEach(({ key, val }) => {
+    res[key] = function mappedMutation (...args) {
+      return this.$store.commit(val, ...args)
+    }
+  })
+  return res
+}
+
 export function mapGetters (getters) {
   const res = {}
   normalizeMap(getters).forEach(({ key, val }) => {

src/index.js

@@ -1,6 +1,6 @@
 import devtoolPlugin from './plugins/devtool'
 import applyMixin from './mixin'
-import { mapGetters, mapActions } from './helpers'
+import { mapState, mapMutations, mapGetters, mapActions } from './helpers'
 
 let Vue // bind on install
 
@@ -322,6 +322,8 @@ if (typeof window !== 'undefined' && window.Vue) {
 export default {
   Store,
   install,
+  mapState,
+  mapMutations,
   mapGetters,
   mapActions
 }

test/unit/test.js

@@ -3,7 +3,7 @@ import chai, { expect } from 'chai'
 import sinonChai from 'sinon-chai'
 import sinon from 'sinon'
 import Vue from 'vue'
-import Vuex, { mapGetters, mapActions } from '../../build/dev-entry'
+import Vuex, { mapState, mapMutations, mapGetters, mapActions } from '../../build/dev-entry'
 
 Vue.use(Vuex)
 chai.use(sinonChai)
@@ -215,6 +215,62 @@ describe('Vuex', () => {
     expect(child.$store).to.equal(store)
   })
 
+  it('helper: mapState', () => {
+    const store = new Vuex.Store({
+      state: {
+        a: 1
+      }
+    })
+    const vm = new Vue({
+      store,
+      computed: mapState({
+        a: state => state.a + 1
+      })
+    })
+    expect(vm.a).to.equal(2)
+    store.state.a++
+    expect(vm.a).to.equal(3)
+  })
+
+  it('helper: mapMutations (array)', () => {
+    const store = new Vuex.Store({
+      state: { count: 0 },
+      mutations: {
+        inc: state => state.count++,
+        dec: state => state.count--
+      }
+    })
+    const vm = new Vue({
+      store,
+      methods: mapMutations(['inc', 'dec'])
+    })
+    vm.inc()
+    expect(store.state.count).to.equal(1)
+    vm.dec()
+    expect(store.state.count).to.equal(0)
+  })
+
+  it('helper: mapMutations (object)', () => {
+    const store = new Vuex.Store({
+      state: { count: 0 },
+      mutations: {
+        inc: state => state.count++,
+        dec: state => state.count--
+      }
+    })
+    const vm = new Vue({
+      store,
+      methods: mapMutations({
+        plus: 'inc',
+        minus: 'dec'
+      })
+    })
+    vm.plus()
+    expect(store.state.count).to.equal(1)
+    vm.minus()
+    expect(store.state.count).to.equal(0)
+  })
+
   it('helper: mapGetters (array)', () => {
     const store = new Vuex.Store({
       state: { count: 0 },