Breaking Changes

• Actions are no longer exposed on the store; instead, they should now be directly imported in components and then bound using the new vuex option.
• When creating a store, the mutations option no longer accepts an Array. Use the new modules option for composing state and mutations.

New

For reasoning behind the API changes, see #54

After calling Vue.use(Vuex), your Vue components will recognize two new options - store and vuex.

Store Injection

The store option is used to inject a Vuex store instance at a root component - the injected store will be available in all child components of the root as this.$store.

State Getters

The vuex.state option allows the component to retrieve state from an injected store using pure functions:

// inside a Vue component
export default {
 vuex: {
 state: {
 count: state => state.count
 }
 }
}

Action Binding

The vuex.actions option allows components to bind raw actions to its injected store, and expose the bound actions as component methods:

import { doThis } from '../vuex/actions'
export default {
 vuex: {
 actions: {
 doThis
 }
 }
}

<button @click="doThis">Do it</button>

Module Composition

The Vuex.Store constructor now also accepts a modules option for easier module composition:

new Vuex.Store({
 modules: {
 a: {
 state: { ... },
 mutations: { ... }
 },
 b: {
 state: { ... },
 mutations: { ... }
 }
 }
})

Each module will be managing a sub-tree of the root state, and the mutations defined in a module will only get that sub-tree as their first argument (instead of the entire state tree for root-level mutations).

Read the Docs!

The docs has been extensively rewritten to reflect the new recommended API usage. So are the examples. Make sure to read those as well.