如何快速上手Vuex
在Mvc模式大行其道的今天，后端通過各種Mvc框架實(shí)現(xiàn)視圖與數(shù)據(jù)模型的隔離，而前端這方面也發(fā)展迅速。vue實(shí)現(xiàn)了Dom與viewModel雙向綁定，使其視圖的更新影響模型，模型的更新影響視圖，你會(huì)不會(huì)覺得這就是Mvc庫呢，實(shí)則不然，因?yàn)樗€差一個(gè)重要的C(也就是控制器)。以下是鄙人對Mvc的個(gè)人理解，如有失誤還請各位道友指正。
- M：模型用于表示各種事物及事物特性的數(shù)據(jù)
- v：view + viewModel，此處鄙人認(rèn)為v不能單純的理解為視圖，而應(yīng)該是視圖+視圖模型。
- c：控制器，用于協(xié)調(diào)M與v之間的關(guān)系。
第一部分：我對vuex的理解
這個(gè)重要的C是誰呢，鄙人認(rèn)為就是此文章要介紹的Vuex。如此理解也是可以的：vue + vuex = 前端mvc框架
flux(單向數(shù)據(jù)流)
- actions：一個(gè)動(dòng)作，可以是view創(chuàng)建的，也可以是程序其他邏輯創(chuàng)建的
- dispatcher：將業(yè)務(wù)邏輯與用戶界面分離，負(fù)責(zé)響應(yīng)action動(dòng)作事件，并意向傳遍整個(gè)系統(tǒng)
- store：業(yè)務(wù)邏輯處理
- view：視圖
vuex是借鑒了flux、redux、The Elm Architecture等相關(guān)思想。
第二部分：揭開vuex面紗
本示例實(shí)現(xiàn)為一個(gè)輸入框動(dòng)態(tài)向下拉列表增加選擇項(xiàng)的功能源碼下載地址，先看效果圖：
為了展示vuex的作用，此示例你可以看到如下內(nèi)容：
- 兩個(gè)局部組件：輸入和下拉列表組件
- 一個(gè)全局組件：App，也是整個(gè)Vue實(shí)例的頂級(jí)組件
- 一個(gè)jquery.js和bootstrap.js，用于實(shí)例下拉組件，jquery只輔助用于bootstrap。
- 還有一個(gè)bootstrap.css，用于美化樣式。
一、實(shí)現(xiàn)vuex的store實(shí)例
//Vue.use(Vuex);//如果是window引入方式，vuex會(huì)自動(dòng)附加到Vue上。
var state = {
list: [{"id":1, "name": "001"}]
};
var mutations = {
ADDITEM: function(argState, item){
argState.list.push(item);
}
};
var getters = {
getList:function(argState){
return argState.list;
}
}
var actions = {
addItem:function(dis,item){
dis.commit('ADDITEM',item);
}
}
var _storeObj = new Vuex.Store({
"state": state,
"mutations": mutations,
"getters": getters,
"actions": actions
});
vuex更新數(shù)據(jù)流程：
- dispatch可以是view視圖中觸發(fā)，也可以是程序業(yè)務(wù)邏輯來觸發(fā)
- actions通過commit方法發(fā)出一個(gè)改變事件
- mutations中具體操作state的改變
- state的改變通過getter暴露給view，state改變后會(huì)立即通知用getter關(guān)聯(lián)起來的view。
- 創(chuàng)建一個(gè)Vuex.Store的實(shí)例，用于Vue實(shí)例。
二、實(shí)現(xiàn)vue的組件
var inputComp = {
render:function(createElement){
var self = this;
return createElement('div',{
attrs:{
"data-id": "001"
},
class:{
"form-inline":true
},
style:{
"display": "inline-block"
}
},[createElement('input',{
attrs:{
type: 'text'
},
class:{
"form-control": true
},
domProps:{
value: self.value
},
on:{
input:function(event){
self.value = event.target.value;
}
}
}),createElement('button',{
on:{
"click": function(event){
self.$store.dispatch('addItem',{"id":2,"name": self.value});
}
},
class:{
"btn":true,
"btn-primary": true
},
domProps:{
type: 'button'
}
},"添加")]);
}
};
//下拉列表組件
var ComboComp = {
render:function(createElement){
var self = this;
return createElement("div",{
attrs:{
"data-id": "ComboComp"
},
class:{
"dropdown":true
},
style:{
"display": "inline-block"
}
},[
createElement("button",{
class:{
"btn": true,
"btn-default": true,
"dropdown-toggle": true
},
attrs:{
"type": "button",
"id": "dr02",
"data-toggle": "dropdown"
}
},[ createElement("span", "選擇"), createElement("span",{
class:{
"caret":true
}
})])
,
createElement("ul",
{
class:{
"dropdown-menu":true
},
attrs:{
"aria-labelledby":"dr02"
}
}, self.$store.getters["getList"].map(function(item){
return createElement("li",item.name);
}))
])
}
};
Vue.component('App',{
template:'<div class="wrap" ><ComboComp></ComboComp> <InputComp></InputComp></div>',
components:{
"InputComp": inputComp,
"ComboComp": ComboComp
}
});
1.inputComp(局部組件)：提供輸入
2.ComboComp(局部組件)：實(shí)現(xiàn)列表內(nèi)容的展示
3.App(全局組件)：頂級(jí)組件，組合inputComp和ComboComp組件。
4.組件參數(shù)說明：
render：返回一個(gè)組件，其中包含視圖，data等。this為vue實(shí)例，參數(shù)是createElement方法，用于創(chuàng)建VNode。
5.重點(diǎn)關(guān)注inputComp組件中button子元素的on中的click方法，內(nèi)部用dispatch觸發(fā)了store中對應(yīng)Id的actions。
createElement('button',{
on:{
"click": function(event){
self.$store.dispatch('addItem',{"id":2,"name": self.value});
}
}
三、輸出
html部分代碼：
<div class="wrap" id="app"> <App></App> </div>
js部分代碼：
var _vue = new Vue({
el: '#app',
store: _storeObj
});
- 視圖中引入了App這個(gè)全局組件
- 生成Vue實(shí)例的時(shí)候?qū)uex中創(chuàng)建的store實(shí)例傳遞進(jìn)去。
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JS數(shù)組Array常用方法匯總和實(shí)例,JavaScript創(chuàng)建數(shù)組的方式,找數(shù)組元素,數(shù)組去重,實(shí)現(xiàn)數(shù)組排序需要的朋友可以參考下2022-05-05
Vue?是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，Vue?的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合，這篇文章主要介紹了vue的指令和插值總結(jié),需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue中@click綁定多個(gè)事件問題(教你避坑),具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了vuex頁面刷新后數(shù)據(jù)丟失的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
Vue之關(guān)于Eslint自動(dòng)加分號(hào)的問題及解決
這篇文章主要介紹了Vue之關(guān)于Eslint自動(dòng)加分號(hào)的問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue阻止重復(fù)請求實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了vue阻止重復(fù)請求實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
vue父組件向子組件動(dòng)態(tài)傳值的兩種方法
這篇文章主要介紹了vue父組件向子組件動(dòng)態(tài)傳值的兩種方法 ,需要的朋友可以參考下2017-11-11
vscode的確是前端開發(fā)中很好的工具，安裝顏色插件，從視覺上是美的享受。這篇文章主要介紹了vscode中vue代碼顏色插件 ,需要的朋友可以參考下2018-10-10
這篇文章介紹了Vue路由vue-router的用法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-01-01
這篇文章主要介紹了Vue之插槽(Slot)的使用方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11