pass e2e tests, improve error stack

examples/chat/components/MessageSection.vue

@@ -42,7 +42,7 @@ export default {
     sendMessage (e) {
       const text = e.target.value
       if (text.trim()) {
-        this.$store.call('sendMessage', {
+        this.$store.trigger('sendMessage', {
           text,
           thread: this.thread
         })

examples/chat/components/ThreadSection.vue

@@ -40,7 +40,7 @@ export default {
   },
   methods: {
     switchThread (id) {
-      this.$store.call('switchThread', { id })
+      this.$store.trigger('switchThread', { id })
     }
   }
 }

examples/counter/main.js

@@ -1,3 +1,4 @@
+import 'babel-polyfill'
 import Vue from 'vue'
 import Counter from './Counter.vue'
 import store from './store'

examples/shopping-cart/components/Cart.vue

@@ -30,7 +30,7 @@ export default {
   },
   methods: {
     checkout (products) {
-      this.$store.call('checkout', products)
+      this.$store.trigger('checkout', products)
     }
   }
 }

examples/shopping-cart/components/ProductList.vue

@@ -23,7 +23,7 @@ export default {
     'addToCart'
   ]),
   created () {
-    this.$store.call('getAllProducts')
+    this.$store.trigger('getAllProducts')
   }
 }
 </script>

examples/todomvc/components/App.vue

@@ -16,7 +16,7 @@
       <input class="toggle-all"
         type="checkbox"
         :checked="allChecked"
-        @change="toggleAll(!allChecked)">
+        @change="toggleAll({ done: !allChecked })">
       <ul class="todo-list">
         <todo v-for="todo in filteredTodos" :todo="todo"></todo>
       </ul>
@@ -81,7 +81,7 @@ export default {
     addTodo (e) {
       var text = e.target.value
       if (text.trim()) {
-        this.$store.call('addTodo', text)
+        this.$store.trigger('addTodo', { text })
       }
       e.target.value = ''
     },

examples/todomvc/components/Todo.vue

@@ -4,9 +4,9 @@
       <input class="toggle"
         type="checkbox"
         :checked="todo.done"
-        @change="toggleTodo(todo)">
+        @change="toggleTodo({ todo: todo })">
       <label v-text="todo.text" @dblclick="editing = true"></label>
-      <button class="destroy" @click="deleteTodo(todo)"></button>
+      <button class="destroy" @click="deleteTodo({ todo: todo })"></button>
     </div>
     <input class="edit"
       v-show="editing"
@@ -19,7 +19,10 @@
 </template>
 
 <script>
+import { mapActions } from 'vuex'
+
 export default {
+  name: 'Todo',
   props: ['todo'],
   data () {
     return {
@@ -36,15 +39,23 @@ export default {
     }
   },
   methods: {
-    toggleTodo (todo) {
-      this.$store.call('toggleTodo', todo)
-    },
+    ...mapActions([
+      'editTodo',
+      'toggleTodo',
+      'deleteTodo'
+    ]),
     doneEdit (e) {
       const value = e.target.value.trim()
+      const { todo } = this
       if (!value) {
-        this.$store.call('deleteTodo', this.todo)
+        this.deleteTodo({
+          todo
+        })
       } else if (this.editing) {
-        this.$store.call('editTodo', this.todo, value)
+        this.editTodo({
+          todo,
+          value
+        })
         this.editing = false
       }
     },

examples/todomvc/main.js

@@ -1,3 +1,4 @@
+import 'babel-polyfill'
 import Vue from 'vue'
 import store from './vuex/store'
 import App from './components/App.vue'

examples/todomvc/vuex/actions.js

@@ -6,5 +6,5 @@ export const toggleAll = makeAction('TOGGLE_ALL')
 export const clearCompleted = makeAction('CLEAR_COMPLETED')
 
 function makeAction (type) {
-  return ({ dispatch }, ...args) => dispatch(type, ...args)
+  return ({ dispatch }, payload) => dispatch(type, payload)
 }

examples/todomvc/vuex/store.js

@@ -17,26 +17,26 @@ const state = {
 }
 
 const mutations = {
-  ADD_TODO (state, text) {
+  ADD_TODO (state, { text }) {
     state.todos.push({
-      text: text,
+      text,
       done: false
     })
   },
 
-  DELETE_TODO (state, todo) {
+  DELETE_TODO (state, { todo }) {
     state.todos.splice(state.todos.indexOf(todo), 1)
   },
 
-  TOGGLE_TODO (state, todo) {
+  TOGGLE_TODO (state, { todo }) {
     todo.done = !todo.done
   },
 
-  EDIT_TODO (state, todo, text) {
-    todo.text = text
+  EDIT_TODO (state, { todo, value }) {
+    todo.text = value
   },
 
-  TOGGLE_ALL (state, done) {
+  TOGGLE_ALL (state, { done }) {
     state.todos.forEach((todo) => {
       todo.done = done
     })

src/helpers.js

@@ -1,7 +1,7 @@
 export function mapGetters (getters) {
   const res = {}
   normalizeMap(getters).forEach(({ key, val }) => {
-    res[key] = function () {
+    res[key] = function mappedGetter () {
       return this.$store.getters[val]
     }
   })
@@ -11,8 +11,8 @@ export function mapGetters (getters) {
 export function mapActions (actions) {
   const res = {}
   normalizeMap(actions).forEach(({ key, val }) => {
-    res[key] = function (...args) {
-      return this.$store.call(val, ...args)
+    res[key] = function mappedAction (...args) {
+      return this.$store.trigger(val, ...args)
     }
   })
   return res

src/index.js

@@ -33,9 +33,15 @@ class Store {
     this._mutations = Object.create(null)
     this._subscribers = []
 
-    // bind dispatch and call to self
-    this.call = bind(this.call, this)
-    this.dispatch = bind(this.dispatch, this)
+    // bind dispatch and trigger to self
+    const store = this
+    const { trigger, dispatch } = this
+    this.trigger = function boundTrigger (type, payload) {
+      trigger.call(store, type, payload)
+    }
+    this.dispatch = function boundDispatch (type, payload) {
+      dispatch.call(store, type, payload)
+    }
 
     // init state and getters
     const getters = extractModuleGetters(options.getters, modules)
@@ -108,18 +114,21 @@ class Store {
 
   mutation (type, handler, path = []) {
     const entry = this._mutations[type] || (this._mutations[type] = [])
-    entry.push(payload => {
-      handler(getNestedState(this.state, path), payload)
+    const store = this
+    entry.push(function wrappedMutationHandler (payload) {
+      handler(getNestedState(store.state, path), payload)
     })
   }
 
   action (type, handler, path = []) {
     const entry = this._actions[type] || (this._actions[type] = [])
-    entry.push((payload, cb) => {
+    const store = this
+    const { trigger, dispatch } = this
+    entry.push(function wrappedActionHandler (payload, cb) {
       let res = handler({
-        call: this.call,
-        dispatch: this.dispatch,
-        state: getNestedState(this.state, path)
+        trigger,
+        dispatch,
+        state: getNestedState(store.state, path)
       }, payload, cb)
       if (!isPromise(res)) {
         res = Promise.resolve(res)
@@ -145,12 +154,14 @@ class Store {
       mutation = { type, payload }
     }
     this._dispatching = true
-    entry.forEach(handler => handler(payload))
+    entry.forEach(function dispatchIterator (handler) {
+      handler(payload)
+    })
     this._dispatching = false
     this._subscribers.forEach(sub => sub(mutation, this.state))
   }
 
-  call (type, payload, cb) {
+  trigger (type, payload, cb) {
     const entry = this._actions[type]
     if (!entry) {
       console.warn(`[vuex] unknown action type: ${type}`)
@@ -249,7 +260,9 @@ function extractModuleGetters (getters = {}, modules = {}, path = []) {
           console.warn(`[vuex] duplicate getter key: ${getterKey}`)
           return
         }
-        getters[getterKey] = state => rawGetter(getNestedState(state, path))
+        getters[getterKey] = function wrappedGetter (state) {
+          return rawGetter(getNestedState(state, path))
+        }
       })
     }
     extractModuleGetters(getters, module.modules, path.concat(key))
@@ -267,12 +280,6 @@ function enableStrictMode (store) {
   }, { deep: true, sync: true })
 }
 
-function bind (fn, ctx) {
-  return function () {
-    return fn.apply(ctx, arguments)
-  }
-}
-
 function isObject (obj) {
   return obj !== null && typeof obj === 'object'
 }