如何快速上手Vuex
更新時間：2017年02月14日 10:55:09 作者：小龍女先生
本文主要介紹了Javascript中Vuex的相關知識。具有很好的參考價值，下面跟著小編一起來看下吧
在Mvc模式大行其道的今天，后端通過各種Mvc框架實現(xiàn)視圖與數(shù)據(jù)模型的隔離，而前端這方面也發(fā)展迅速。vue實現(xiàn)了Dom與viewModel雙向綁定，使其視圖的更新影響模型，模型的更新影響視圖，你會不會覺得這就是Mvc庫呢，實則不然，因為他還差一個重要的C(也就是控制器)。以下是鄙人對Mvc的個人理解，如有失誤還請各位道友指正。
- M：模型用于表示各種事物及事物特性的數(shù)據(jù)
- v：view + viewModel，此處鄙人認為v不能單純的理解為視圖，而應該是視圖+視圖模型。
- c：控制器，用于協(xié)調M與v之間的關系。
第一部分：我對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等相關思想。
第二部分：揭開vuex面紗
本示例實現(xiàn)為一個輸入框動態(tài)向下拉列表增加選擇項的功能源碼下載地址，先看效果圖：
為了展示vuex的作用，此示例你可以看到如下內容：
- 兩個局部組件：輸入和下拉列表組件
- 一個全局組件：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關聯(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)列表內容的展示
3.App(全局組件)：頂級組件，組合inputComp和ComboComp組件。
4.組件參數(shù)說明：
render：返回一個組件，其中包含視圖，data等。this為vue實例，參數(shù)是createElement方法，用于創(chuàng)建VNode。
5.重點關注inputComp組件中button子元素的on中的click方法，內部用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實例的時候將vuex中創(chuàng)建的store實例傳遞進去。
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
您可能感興趣的文章:
相關文章
ESLint是一個代碼檢查工具,用來檢查你的代碼是否符合指定的規(guī)范,下面這篇文章主要給大家介紹了關于Vue項目中ESLint配置(VScode)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04
文章介紹了如何在Vue 3項目中使用Pinia進行狀態(tài)管理,主要內容包括安裝Pinia、初始化、在main.ts中注冊和使用,以及在.vue的setup中使用state,文章還提到getters和actions的使用可以參考官方文檔,總結部分表達了作者希望得到大家支持的意愿2025-01-01
Vue.js監(jiān)聽select2的值改變進行查詢方式
這篇文章主要介紹了Vue.js監(jiān)聽select2的值改變進行查詢方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vuex 進階之模塊化組織詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
ant design vue動態(tài)循環(huán)生成表單以及自定義校驗規(guī)則詳解
這篇文章主要介紹了ant design vue動態(tài)循環(huán)生成表單以及自定義校驗規(guī)則詳解,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要介紹了Vite?vue使用cdn引入element-plus的相關知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單實時匯率計算功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要為大家詳細介紹了Vue.js組件tree實現(xiàn)無限級樹形菜單代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了vue單頁面如何設置高度100%全屏，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue實現(xiàn)文本編譯詳情，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，感興趣的小伙伴可以參考一下，希望對你的學習有所幫助2022-08-08