change: Vuex -> Vuex.Store, async action format

README.md

@@ -6,9 +6,7 @@
   <img width="700px" src="https://raw.githubusercontent.com/vuejs/vuex/master/docs/en/vuex.png">
 </p>
 
-**Note**: Vuex is still in development - API may change anytime.
-
-[Documentation](http://vuex.vuejs.org)
+## NOTE: Vuex is still in development - API may change anytime.
 
 ## Examples
 

examples/chat/api/index.js

@@ -1,4 +1,3 @@
-import vuex from '../vuex'
 const data = require('./mock-data')
 const LATENCY = 16
 

examples/chat/components/App.vue

@@ -8,10 +8,12 @@
 </template>
 
 <script>
+import store from '../store'
 import ThreadSection from './ThreadSection.vue'
 import MessageSection from './MessageSection.vue'
 
 export default {
+  store,
   components: {
     ThreadSection,
     MessageSection

examples/chat/components/MessageSection.vue

@@ -13,21 +13,21 @@
 </template>
 
 <script>
-import vuex from '../vuex'
+import store from '../store'
 import Message from './Message.vue'
 
 export default {
   components: { Message },
   computed: {
     thread () {
-      const id = vuex.state.currentThreadID
+      const id = store.state.currentThreadID
       return id
-        ? vuex.state.threads[id]
+        ? store.state.threads[id]
         : {}
     },
     messages () {
       return this.thread.messages &&
-        this.thread.messages.map(id => vuex.state.messages[id])
+        this.thread.messages.map(id => store.state.messages[id])
     }
   },
   watch: {
@@ -42,7 +42,7 @@ export default {
     sendMessage (e) {
       const text = e.target.value
       if (text.trim()) {
-        vuex.actions.sendMessage(text, this.thread)
+        store.actions.sendMessage(text, this.thread)
         e.target.value = ''
       }
     }

examples/chat/components/Thread.vue

@@ -14,18 +14,18 @@
 </template>
 
 <script>
-import vuex from '../vuex'
+import store from '../store'
 
 export default {
   props: ['thread'],
   computed: {
     isCurrentThread () {
-      return this.thread.id === vuex.state.currentThreadID
+      return this.thread.id === store.state.currentThreadID
     }
   },
   methods: {
     onClick () {
-      vuex.actions.switchThread(this.thread.id)
+      store.actions.switchThread(this.thread.id)
     }
   }
 }

examples/chat/components/ThreadSection.vue

@@ -16,17 +16,17 @@
 </template>
 
 <script>
-import vuex from '../vuex'
+import store from '../store'
 import Thread from './Thread.vue'
 
 export default {
   components: { Thread },
   computed: {
     threads () {
-      return vuex.state.threads
+      return store.state.threads
     },
     unreadCount () {
-      const threads = vuex.state.threads
+      const threads = store.state.threads
       return Object.keys(threads).reduce((count, id) => {
         return threads[id].lastMessage.isRead
           ? count

examples/chat/main.js

@@ -1,7 +1,7 @@
 import 'babel-polyfill'
 import Vue from 'vue'
 import App from './components/App.vue'
-import vuex from './vuex'
+import store from './store'
 
 Vue.filter('time', timestamp => {
   return new Date(timestamp).toLocaleTimeString()
@@ -12,4 +12,4 @@ new Vue({
   components: { App }
 })
 
-vuex.actions.getAllMessages()
+store.actions.getAllMessages()

examples/chat/vuex/actions.js → examples/chat/store/actions.js

@@ -1,18 +1,18 @@
 import * as api from '../api'
 import * as types from './mutation-types'
 
-export const getAllMessages = () => dispatch => {
+export const getAllMessages = ({ dispatch }) => {
   api.getAllMessages(messages => {
     dispatch(types.RECEIVE_ALL, messages)
   })
 }
 
-export const sendMessage = (text, thread) => dispatch => {
+export const sendMessage = ({ dispatch }, text, thread) => {
   api.createMessage({ text, thread }, message => {
     dispatch(types.RECEIVE_MESSAGE, message)
   })
 }
 
-export const switchThread = id => dispatch => {
+export const switchThread = ({ dispatch }, id) => {
   dispatch(types.SWITCH_THREAD, id)
 }

examples/chat/vuex/index.js → examples/chat/store/index.js

@@ -5,7 +5,7 @@ import mutations from './mutations'
 
 Vue.use(Vuex)
 
-export default new Vuex({
+export default new Vuex.Store({
   state: {
     currentThreadID: null,
     threads: {

examples/counter-hot/Counter.vue

@@ -9,14 +9,14 @@
 </template>
 
 <script>
-import vuex from './vuex'
+import store from './store'
 
 export default {
   computed: {
     count () {
-      return vuex.state.count
+      return store.state.count
     }
   },
-  methods: vuex.actions
+  methods: store.actions
 }
 </script>

examples/counter-hot/vuex/actions.js → examples/counter-hot/store/actions.js

@@ -5,13 +5,13 @@ export default {
   increment: INCREMENT,
   decrement: DECREMENT,
 
-  incrementIfOdd: () => (dispatch, state) => {
+  incrementIfOdd: ({ dispatch, state }) => {
     if ((state.count + 1) % 2 === 0) {
       dispatch(INCREMENT)
     }
   },
 
-  incrementAsync: () => dispatch => {
+  incrementAsync: ({ dispatch }) => {
     setTimeout(() => {
       dispatch(INCREMENT)
     }, 1000)

examples/counter-hot/vuex/index.js → examples/counter-hot/store/index.js

@@ -9,7 +9,7 @@ const state = {
   count: 0
 }
 
-const vuex = new Vuex({
+const store = new Vuex.Store({
   state,
   actions,
   mutations
@@ -19,11 +19,11 @@ if (module.hot) {
   module.hot.accept(['./actions', './mutations'], () => {
     const newActions = require('./actions').default
     const newMutations = require('./mutations').default
-    vuex.hotUpdate({
+    store.hotUpdate({
       actions: newActions,
       mutations: newMutations
     })
   })
 }
 
-export default vuex
+export default store

examples/counter/Counter.vue

@@ -9,14 +9,14 @@
 </template>
 
 <script>
-import vuex from './vuex'
+import store from './store'
 
 export default {
   computed: {
     count () {
-      return vuex.state.count
+      return store.state.count
     }
   },
-  methods: vuex.actions
+  methods: store.actions
 }
 </script>

examples/counter/vuex.js → examples/counter/store.js

@@ -15,7 +15,7 @@ const state = {
 }
 
 // actions are what components will be able to
-// call as vuex.actions.xxx
+// call as store.actions.xxx
 // note these are not the final functions the
 // components will be calling.
 const actions = {
@@ -30,7 +30,7 @@ const actions = {
   // the returned function will get two arguments,
   // the first being the dispatch function and the second is
   // the state tree.
-  incrementIfOdd: () => (dispatch, state) => {
+  incrementIfOdd: ({ dispatch, state }) => {
     if ((state.count + 1) % 2 === 0) {
       dispatch(INCREMENT)
     }
@@ -38,7 +38,7 @@ const actions = {
 
   // we also use thunks for async actions.
   // you can dispatch multiple mutations inside a thunk action.
-  incrementAsync: () => dispatch => {
+  incrementAsync: ({ dispatch }) => {
     setTimeout(() => {
       dispatch(INCREMENT)
     }, 1000)
@@ -67,7 +67,7 @@ const mutations = {
 // You can also provide middlewares, which is just an array of
 // objects containing some hooks to be called at initialization
 // and after each mutation.
-export default new Vuex({
+export default new Vuex.Store({
   state,
   actions,
   mutations

examples/shopping-cart/components/Cart.vue

@@ -14,14 +14,14 @@
 </template>
 
 <script>
-import vuex from '../vuex'
-const { checkout } = vuex.actions
+import store from '../store'
+const { checkout } = store.actions
 
 export default {
   computed: {
     products () {
-      return vuex.state.cart.added.map(({ id, quantity }) => {
-        const product = vuex.state.products.find(p => p.id === id)
+      return store.state.cart.added.map(({ id, quantity }) => {
+        const product = store.state.products.find(p => p.id === id)
         return {
           title: product.title,
           price: product.price,
@@ -30,7 +30,7 @@ export default {
       })
     },
     checkoutStatus () {
-      return vuex.state.cart.lastCheckout
+      return store.state.cart.lastCheckout
     },
     total () {
       return this.products.reduce((total, p) => {

examples/shopping-cart/components/ProductList.vue

@@ -13,13 +13,13 @@
 </template>
 
 <script>
-import vuex from '../vuex'
-const { getAllProducts, addToCart } = vuex.actions
+import store from '../store'
+const { getAllProducts, addToCart } = store.actions
 
 export default {
   computed: {
     products () {
-      return vuex.state.products
+      return store.state.products
     }
   },
   created () {

examples/shopping-cart/vuex/actions.js → examples/shopping-cart/store/actions.js

@@ -3,7 +3,7 @@ import * as types from './mutation-types'
 
 export const addToCart = types.ADD_TO_CART
 
-export const checkout = (products) => (dispatch, state) => {
+export const checkout = ({ dispatch, state }, products) => {
   const savedCartItems = [...state.cart.added]
   dispatch(types.CHECKOUT_REQUEST)
   shop.buyProducts(
@@ -13,7 +13,7 @@ export const checkout = (products) => (dispatch, state) => {
   )
 }
 
-export const getAllProducts = () => dispatch => {
+export const getAllProducts = ({ dispatch }) => {
   shop.getProducts(products => {
     dispatch(types.RECEIVE_PRODUCTS, products)
   })

examples/shopping-cart/vuex/index.js → examples/shopping-cart/store/index.js

@@ -9,7 +9,7 @@ Vue.config.debug = true
 
 const debug = process.env.NODE_ENV !== 'production'
 
-export default new Vuex({
+export default new Vuex.Store({
   state: {
     cart: cartInitialState,
     products: productsInitialState

examples/todomvc/components/App.vue

@@ -46,14 +46,14 @@
 </template>
 
 <script>
-import vuex from '../vuex'
+import store from '../store'
 import Todo from './Todo.vue'
 
 const {
   addTodo,
   toggleAll,
   clearCompleted
-} = vuex.actions
+} = store.actions
 
 const filters = {
   all: (todos) => todos,
@@ -71,7 +71,7 @@ export default {
   },
   computed: {
     todos () {
-      return vuex.state.todos
+      return store.state.todos
     },
     allChecked () {
       return this.todos.every(todo => todo.done)

examples/todomvc/components/Todo.vue

@@ -19,12 +19,12 @@
 </template>
 
 <script>
-import vuex from '../vuex'
+import store from '../store'
 const {
   toggleTodo,
   deleteTodo,
   editTodo
-} = vuex.actions
+} = store.actions
 
 export default {
   props: ['todo'],

examples/todomvc/vuex/index.js → examples/todomvc/store/index.js

@@ -11,7 +11,7 @@ const state = {
   todos: JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
 }
 
-export default new Vuex({
+export default new Vuex.Store({
   state,
   actions,
   mutations,

package.json

@@ -36,7 +36,7 @@
     "babel-polyfill": "^6.2.0",
     "babel-preset-es2015": "^6.1.18",
     "babel-preset-stage-2": "^6.1.18",
-    "babel-runtime": "^6.2.0",
+    "babel-runtime": "^5.8.0",
     "chai": "^3.4.1",
     "css-loader": "^0.21.0",
     "eslint": "^1.10.2",
@@ -46,7 +46,7 @@
     "vue": "^1.0.8",
     "vue-hot-reload-api": "^1.2.1",
     "vue-html-loader": "^1.0.0",
-    "vue-loader": "^7.1.1",
+    "vue-loader": "^7.2.0",
     "webpack": "^1.12.8",
     "webpack-dev-server": "^1.12.1"
   }

src/index.js

@@ -4,7 +4,7 @@ import createLogger from './middlewares/logger'
 
 let Vue
 
-export default class Vuex {
+export class Store {
 
   /**
    * @param {Object} options
@@ -22,6 +22,11 @@ export default class Vuex {
     middlewares = [],
     strict = false
   } = {}) {
+    // bind dispatch to self
+    const dispatch = this.dispatch
+    this.dispatch = (...args) => {
+      dispatch.apply(this, args)
+    }
     // use a Vue instance to store the state tree
     this._vm = new Vue({
       data: state
@@ -127,7 +132,7 @@ export default class Vuex {
     new Watcher(this._vm, '$data', () => {
       if (!this._dispatching) {
         throw new Error(
-          '[vuex] Do not mutate vuex state outside mutation handlers.'
+          '[vuex] Do not mutate vuex store state outside mutation handlers.'
         )
       }
     }, { deep: true, sync: true })
@@ -214,12 +219,11 @@ export default class Vuex {
 
 // export logger factory
 export { createLogger }
-Vuex.createLogger = createLogger
-
-/**
- * Exposed install method
- */
 
-Vuex.install = function (_Vue) {
-  Vue = _Vue
+export default {
+  Store,
+  createLogger,
+  install (_Vue) {
+    Vue = _Vue
+  }
 }

src/util.js

@@ -2,24 +2,17 @@
  * Create a actual callable action function.
  *
  * @param {String|Function} action
- * @param {Vuex} vuex
+ * @param {Vuex} store
  * @return {Function} [description]
  */
 
-export function createAction (action, vuex) {
+export function createAction (action, store) {
   if (typeof action === 'string') {
     // simple action string shorthand
-    return (...payload) => {
-      vuex.dispatch(action, ...payload)
-    }
+    return (...payload) => store.dispatch(action, ...payload)
   } else if (typeof action === 'function') {
-    // thunk action
-    return (...args) => {
-      const dispatch = (...args) => {
-        vuex.dispatch(...args)
-      }
-      action(...args)(dispatch, vuex.state)
-    }
+    // normal action
+    return (...payload) => action(store, ...payload)
   }
 }
 

test/test.js

@@ -9,7 +9,7 @@ const TEST = 'TEST'
 
 describe('Vuex', () => {
   it('direct dispatch', () => {
-    const vuex = new Vuex({
+    const store = new Vuex.Store({
       state: {
         a: 1
       },
@@ -19,12 +19,12 @@ describe('Vuex', () => {
         }
       }
     })
-    vuex.dispatch(TEST, 2)
-    expect(vuex.state.a).to.equal(3)
+    store.dispatch(TEST, 2)
+    expect(store.state.a).to.equal(3)
   })
 
   it('simple action', function () {
-    const vuex = new Vuex({
+    const store = new Vuex.Store({
       state: {
         a: 1
       },
@@ -37,19 +37,19 @@ describe('Vuex', () => {
         }
       }
     })
-    vuex.actions.test(2)
-    expect(vuex.state.a).to.equal(3)
+    store.actions.test(2)
+    expect(store.state.a).to.equal(3)
   })
 
   it('async action', function (done) {
     const TEST = 'TEST'
-    const vuex = new Vuex({
+    const store = new Vuex.Store({
       state: {
         a: 1,
         timeout: 10
       },
       actions: {
-        test: (n) => (dispatch, state) => {
+        test: ({ dispatch, state }, n) => {
           setTimeout(() => {
             dispatch(TEST, n)
           }, state.timeout)
@@ -61,16 +61,16 @@ describe('Vuex', () => {
         }
       }
     })
-    vuex.actions.test(2)
+    store.actions.test(2)
     setTimeout(() => {
-      expect(vuex.state.a).to.equal(3)
+      expect(store.state.a).to.equal(3)
       done()
-    }, vuex.state.timeout)
+    }, store.state.timeout)
   })
 
   it('array option syntax', function () {
     const TEST2 = 'TEST2'
-    const vuex = new Vuex({
+    const store = new Vuex.Store({
       state: {
         a: 1,
         b: 1,
@@ -94,16 +94,16 @@ describe('Vuex', () => {
         }
       ]
     })
-    vuex.actions.test(2)
-    expect(vuex.state.a).to.equal(3)
-    expect(vuex.state.b).to.equal(3)
-    expect(vuex.state.c).to.equal(1)
-    vuex.actions.test2(2)
-    expect(vuex.state.c).to.equal(3)
+    store.actions.test(2)
+    expect(store.state.a).to.equal(3)
+    expect(store.state.b).to.equal(3)
+    expect(store.state.c).to.equal(1)
+    store.actions.test2(2)
+    expect(store.state.c).to.equal(3)
   })
 
   it('hot reload', function () {
-    const vuex = new Vuex({
+    const store = new Vuex.Store({
       state: {
         a: 1
       },
@@ -116,12 +116,12 @@ describe('Vuex', () => {
         }
       }
     })
-    const test = vuex.actions.test
+    const test = store.actions.test
     test(2)
-    expect(vuex.state.a).to.equal(3)
-    vuex.hotUpdate({
+    expect(store.state.a).to.equal(3)
+    store.hotUpdate({
       actions: {
-        test: n => dispatch => dispatch(TEST, n + 1)
+        test: ({ dispatch }, n) => dispatch(TEST, n + 1)
       },
       mutations: {
         [TEST] (state, n) {
@@ -130,13 +130,13 @@ describe('Vuex', () => {
       }
     })
     test(999)
-    expect(vuex.state.a).to.equal(1000)
+    expect(store.state.a).to.equal(1000)
   })
 
   it('middleware', function () {
     let initState
     const mutations = []
-    const vuex = new Vuex({
+    const store = new Vuex.Store({
       state: {
         a: 1
       },
@@ -154,14 +154,14 @@ describe('Vuex', () => {
             initState = state
           },
           onMutation (mut, state) {
-            expect(state).to.equal(vuex.state)
+            expect(state).to.equal(store.state)
             mutations.push(mut)
           }
         }
       ]
     })
-    expect(initState).to.equal(vuex.state)
-    vuex.actions.test(2)
+    expect(initState).to.equal(store.state)
+    store.actions.test(2)
     expect(mutations.length).to.equal(1)
     expect(mutations[0].type).to.equal(TEST)
     expect(mutations[0].payload[0]).to.equal(2)
@@ -170,7 +170,7 @@ describe('Vuex', () => {
   it('middleware with snapshot', function () {
     let initState
     const mutations = []
-    const vuex = new Vuex({
+    const store = new Vuex.Store({
       state: {
         a: 1
       },
@@ -198,31 +198,31 @@ describe('Vuex', () => {
         }
       ]
     })
-    expect(initState).not.to.equal(vuex.state)
+    expect(initState).not.to.equal(store.state)
     expect(initState.a).to.equal(1)
-    vuex.actions.test(2)
+    store.actions.test(2)
     expect(mutations.length).to.equal(1)
     expect(mutations[0].mutation.type).to.equal(TEST)
     expect(mutations[0].mutation.payload[0]).to.equal(2)
-    expect(mutations[0].nextState).not.to.equal(vuex.state)
+    expect(mutations[0].nextState).not.to.equal(store.state)
     expect(mutations[0].prevState.a).to.equal(1)
     expect(mutations[0].nextState.a).to.equal(3)
   })
 
   it('strict mode: warn mutations outside of handlers', function () {
-    const vuex = new Vuex({
+    const store = new Vuex.Store({
       state: {
         a: 1
       },
       actions: {
-        test: () => (dispatch, state) => {
+        test: ({ dispatch, state }) => {
           state.a++
         }
       },
       strict: true
     })
     expect(() => {
-      vuex.actions.test(2)
-    }).to.throw(/Do not mutate vuex state outside mutation handlers/)
+      store.actions.test(2)
+    }).to.throw(/Do not mutate vuex store state outside mutation handlers/)
   })
 })