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