Migrating from Vuex 0.6.x to 1.0

This tutorial is going to cover how to migrate from Vuex 0.6.x to Vuex 1.0.

But wait a minute why not Vuex 2.0, why bother myself with migrating to Vuex 1.0 when I could have just migrated to Vuex 2.0. is should be noted that both Vuex 1.0 and 2.0 where released simultaneously. Note also that both Vuex 1.0 and Vuex 2.0:

• fully support both Vue 1.0 and 2.0
• will be maintained for the foreseeable future

However, they target users slightly differently.

The 2.0 version of Vuex is a radical redesign and simplification of the Vuex API, if you want to be on the cutting edge of client-side state management or you are starting a new project. This tutorial does not cover migration to Vuex 2.0.

Vuex 1.0 is backward-compatible, hence you require very few changes to upgrade. This version is recommended for those that hav a large codebase or that want the smoothest possible upgrade path to Vue 2.0. This will help facilitate that process, however, it will only include migration notes.

store.watch with String Property Path ^replaced

The store.watch now only accept functions. So for instance, you would have to replace the following line:

store.watch('user.notifications', callback)

With this:

store.watch(
  // When the returned result changes...
  function (state) {
    return state.user.notifications
  },
  // Run this callback
  callback
)

This gives you more complete control over the reactive properties you would like to watch.

Upgrade Path

To find examples of store.watch with a string as the first argument, run the migration helper on your codebase.

Store's Event Emitter ^removed

The store instance will no longer expose the event emitter interface (on, off, emit). If you were previously using the store as a global event bus, see the $dispatch and $broadcast section on our migration from vue 1.0x tutorial for migration instructions.

Rather than using this interface to watch events emitted by the store itself (e.g. store.on('mutation', callback)), a new method store.subscribe has been is introduced. Its typical usage inside a plugin would be:

var myPlugin = store => {
  store.subscribe(function (mutation, state) {
    // Do something...
  })
}

You can find more examples and information in our tutorial on plugins.

Upgrade Path

To find examples of store.on, store.off, and store.emit, run the migration helper on your codebase.

Middlewares ^replaced

Middlewares are replaced by plugins. A plugin is a function that receives the store as the only argument, and can listen to the mutation event on the store:

const myPlugins = store => {
  store.subscribe('mutation', (mutation, state) => {
    // Action to be performed...
  })
}

You can find more examples and information in our tutorial on plugins.

Upgrade Path

To find examples of the middlewares option on a store, run the migration helper on your codebase.

Previous: Migrating from Vue Router 0.7.x