vuex 2 x新版使用指南

vuex為了迎合vue2.0的變化 進行了大量的調整和優化

先看下尤大2.0的設計 傳送門

總結下大概有幾點變化

原文 terms naming change for better semantics 這個語義化說的是觸發action和mutation的api上

在使用action的時候 我們一般是從vue元件本身dispatch派發乙個action 這個其實只是乙個命令 並沒有實際

改變什麼， 而dispatch乙個mutation其實是改變了vuex本身的資料 所以一般從資料角度理解 這種應該屬於事物提交。那麼變化之後的命名就是commit這樣更加語義化 也更好的理解職責

新的寫法

methods:)

}}

actions:)

}}

add: function(store, param )

var store =  new vuex.store(,

mutations:
},// action不用再去外面定義 可以直接寫在構建引數裡
actions:,
}})store.dispatch('add',2)

computed:

}

其實這個組合事件流概念 沒怎麼用過 也不好翻譯 我就簡單從變化性翻譯它

就是action現在返回了promise 在之前的版本 並沒有返回promise 而2.x的原始碼中已經返回了promise

所以也就可以支援所謂的composable action

// action我們定義乙個返回promise的add action

actions:)
}}// 這裡可以在dispatch之後直接處理非同步
this.$store.dispatch('add',2).then(function(resp))

這些都是什麼鬼呢？

其實如果你用過vuex1.x以下的版本 其實它就是我們vue元件中的vuex屬性的 換了一種更高逼格寫法

可以定義一組要獲取的actions getters 然後map進來

// 舊版寫法

template:"....",
vuex:
},actions:
}}) // 新版寫法 es5 寫法
template:"....",
computed:vuex.mapgetters(),
methods:vuex.mapgetters()
})

// es6寫法 支援rest引數這種寫法 也可以直接完全使用map套裝注入

import  from
'vuex'
export
default ,
...mapgetters(['getmessage', 'getname'])
},methods: ,
...mapactions(['add','edit'])
}}

// 這個就是換個名字

store.middlewares -> store.plugins
// 這貨貌似乾掉又被還原了 尤大真是喜怒無常 哈    
store.watch
// 使用subscribe 監聽vuex的變化
store.subscribe((mutation, state) => )
// 註冊模組
registermodule
// 登出模組
unregistermodule

vuex入門例項結束 感謝閱讀：）

demo位址

CSDN markdown 新版編輯器使用指南

建立乙個自定義列表 如何建立乙個註腳 注釋也是必不可少的 katex數學公式 新的甘特圖功能，豐富你的文章 uml 圖表 flowchart流程圖 匯出與匯入 你好！這是你第一次使用markdown編輯器所展示的歡迎頁。如果你想學習如何使用markdown編輯器,可以仔細閱讀這篇文章，了解一下mar...

vue router2 x使用入門

測試一 測試二在vue router2.x中使用about 測試一 測試二在vue devtools中可檢視到所有的某個路由的所有資訊 路由的重定向需要我們在路由檔案中配置 注意 從圖中看出，雖然路由發生了跳轉，但是後面跟的引數並沒有發生變化。引數含義 注意的點 在我寫demo的時候發現，如果你在乙...

Starling2 x 遮罩Mask的使用

在startling裡的displayobject物件會存在乙個mask的變數，可以把各種形狀賦值進去，來得到乙個新的圖形。其形狀不止侷限於矩形，甚至多邊形，圓形或者更複雜的組合。這一切可以使用canvas來實現多邊形圓形。var image image new image texture var ...