v0.4.0
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 newmodules
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.