Vuex原來可以這樣上手

在mvc模式大行其道的今天，後端通過各種mvc框架實現檢視與資料模型的隔離，而前端這方面也發展迅速。vue實現了dom與viewmodel雙向繫結，使其檢視的更新影響模型，模型的更新影響檢視，你會不會覺得這就是mvc庫呢，實則不然，因為他還差乙個重要的c(也就是控制器)。以下是鄙人對mvc的個人理解，如有失誤還請各位道友指正。

這個重要的c是誰呢，鄙人認為就是此文章要介紹的vuex（如果你想初識vue，可以移步

vue原來可以這樣上手

這篇博文）。如此理解也是可以的：vue + vuex = 前端mvc框架

本示例實現為乙個輸入框動態向下拉列表增加選擇項的功能

，先看效果圖：

為了展示vuex的作用，此示例你可以看到如下內容：

//
vue.use(vuex);//如果是window引入方式，vuex會自動附加到vue上。
var state =]
};var mutations =
};var getters =
}var actions =
}var _storeobj = new
vuex.store();

vuex更新資料流程：

},"新增")]);

}};//

下拉列表元件

var combocomp =,

class:,

style:

},[createelement("button",,

attrs:

},[ createelement("span", "選擇"), createelement("span",

})])

,createelement("ul",

,attrs:

}, self.$store.getters["getlist"].map(function

(item)))])}

}; template:'

', components:

});重點關注inputcomp元件中button子元素的on中的click方法，內部用dispatch觸發了store中對應id的actions。

createelement('button',);}}

html部分**：

<
div 
class
="wrap"
id>
<
>
>
div>

js部分**：

var _vue = new
vue();

生成vue例項的時候將vuex中建立的store例項傳遞進去。

Vuex原來可以這樣上手

在mvc模式大行其道的今天，後端通過各種mvc框架實現檢視與資料模型的隔離，而前端這方面也發展迅速。vue實現了dom與viewmodel雙向繫結，使其檢視的更新影響模型，模型的更新影響檢視，你會不會覺得這就是mvc庫呢，實則不然，因為他還差乙個重要的c 也就是控制器以下是鄙人對mvc的個人理解，...

Vuex原來可以這樣上手

Vuex原來可以這樣上手

Vuex原來可以這樣上手

Vuex原來可以這樣上手

相關推薦