從 Vuex 0.6.x 遷移到 1.0

從 Vuex 0.6.x 遷移到 1.0

Vuex 2.0 已經(jīng)發(fā)布了，但是這份指南只涵蓋遷移到 1.0？這是打錯(cuò)了嗎？此外，似乎 Vuex 1.0 和 2.0 也同時(shí)發(fā)布。這是怎么回事？我該用哪一個(gè)并且哪一個(gè)兼容 Vue 2.0呢？

   Vuex 1.0 和 2.0 如下：

• 都完全支持 Vue 1.0 和 2.0

• 將在可預(yù)見(jiàn)的未來(lái)保留支持

然而它們的目標(biāo)用戶(hù)稍微有所不同。

Vuex 2.0 從根本上重新設(shè)計(jì)并且提供簡(jiǎn)潔的 API，用于幫助正在開(kāi)始一個(gè)新項(xiàng)目的用戶(hù)，或想要用客戶(hù)端狀態(tài)管理前沿技術(shù)的用戶(hù)。此遷移指南不涵蓋 Vuex 2.0 相關(guān)內(nèi)容，因此如果你想了解更多，請(qǐng)查閱 Vuex 2.0 文檔。

Vuex 1.0 主要是向下兼容，所以升級(jí)只需要很小的改動(dòng)。推薦擁有大量現(xiàn)存代碼庫(kù)的用戶(hù)，或只想盡可能平滑升級(jí) Vue 2.0 的用戶(hù)。這份指南致力促進(jìn)這一過(guò)程，但僅包括遷移說(shuō)明。完整使用指南請(qǐng)查閱 Vuex 1.0 文檔。

目錄

• 帶字符串屬性路徑的 store.watch

• Store 的事件觸發(fā)器

• 中間件

帶字符串屬性路徑的 store.watch ^替換

store.watch 現(xiàn)在只接受函數(shù)。因此，下面例子你需要替換：

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

為：

store.watch(
  // 當(dāng)返回結(jié)果改變...
  function (state) {
    return state.user.notifications
  },
  // 執(zhí)行回調(diào)函數(shù)
  callback
)

這幫助你更加完善的控制那些需要監(jiān)聽(tīng)的響應(yīng)式屬性。

Store 的事件觸發(fā)器 ^移除

store 實(shí)例不再暴露事件觸發(fā)器 (event emitter) 接口 (on, off, emit)。如果你之前使用 store 作為全局的 event bus，遷移說(shuō)明相關(guān)內(nèi)容請(qǐng)查閱 此章節(jié)。

為了替換正在使用觀察 store 自身觸發(fā)事件的這些接口，(例如：store.on('mutation', callback))，我們引入新的方法 store.subscribe。在插件中的典型使用方式如下：

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

更多信息請(qǐng)查閱 插件文檔 的示例。

中間件 ^替換

中間件被替換為插件。插件是接收 store 作為僅有參數(shù)的基本函數(shù)，能夠監(jiān)聽(tīng) store 中的 mutation 事件：

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

更多詳情，請(qǐng)查閱 插件文檔。