從 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)用戶稍微有所不同。

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

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

帶字符串屬性路徑的?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)式屬性。

升級(jí)方法

在代碼庫(kù)運(yùn)行遷移工具，查找在?store.watch?中使用字符串作為第一個(gè)參數(shù)的事例。

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)查閱插件文檔的示例。

升級(jí)方式

在代碼庫(kù)運(yùn)行遷移工具，查找使用了?store.on,?store.off,?store.emit的事例。

中間件?替換

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

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

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

升級(jí)方法

在代碼庫(kù)運(yùn)行遷移工具，查找使用了?middlewares?選項(xiàng)的事例。

from:?https://cn.vuejs.org/v2/guide/migration-vuex.html

總結(jié)

以上是生活随笔為你收集整理的从 Vuex 0.6.x 迁移到 1.0的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。