Migrating from Vuex 0.6.x to 1.0

Vuex 2.0 has been released, but this guide only covers migrating to 1.0? Is this a typo? In addition, it seems that Vuex 1.0 and 2.0 are also released at the same time. How is this going? Which one should I use and which one is compatible with Vue 2.0?

Vuex 1.0 and 2.0 are as follows:

• Both fully support Vue 1.0 and 2.0

• will retain support for the foreseeable future

However, their target users are slightly different.

Vuex 2.0 has been redesigned from the ground up and provides a clean API to help users who are starting a new project, or who want to manage cutting-edge technologies with client-side state. This migration guide does not cover Vuex 2.0 related content, so if you want to learn more, check out the Vuex 2.0 documentation.

Vuex 1.0 is mainly backward compatible, so the upgrade requires only minor changes. Recommended for users with large existing code bases, or those who just want to upgrade to Vue 2.0 as smoothly as possible. This guide is intended to facilitate this process but only includes migration instructions. For complete usage guidelines, please see the Vuex 1.0 documentation.

Directory

• store.watch with string attribute path

• Store’s event trigger

• Middleware

store.watch with string attribute path ^Replace

store.watch Now only accepts functions. Therefore, in the following example, you need to replace:

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

with:

store.watch(
  // 当返回结果改变...
  function (state) {
    return state.user.notifications
  },
  // 执行回调函数
  callback
)

This helps you more fully control the responsive properties that need to be monitored.

Store's event trigger^Remove

The store instance is no longer Expose event emitter interfaces (on, off, emit). If you used the store as the global event bus before, please refer to this chapter for migration instructions.

In order to replace these interfaces that are being used to observe events triggered by the store itself, (for example: store.on('mutation', callback)), we introduce new methodsstore.subscribe. Typical usage in a plug-in is as follows:

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

For more information, please consult the plug-in documentation for examples.

Middleware^Replace

Middleware Replaced with plugins. The plug-in is a basic function that receives store as the only parameter and can listen to mutation events in the store:

const myPlugins = store => {
  store.subscribe('mutation', (mutation, state) => {
    // Do something...
  })
}

For more details, please consult the plug-in documentation.