vuex 0.4.0

on Node.js Yarn

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.