這篇文章主要介紹怎樣快速上手Vuex，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

在Mvc模式大行其道的今天，后端通過各種Mvc框架實(shí)現(xiàn)視圖與數(shù)據(jù)模型的隔離，而前端這方面也發(fā)展迅速。vue實(shí)現(xiàn)了Dom與viewModel雙向綁定，使其視圖的更新影響模型，模型的更新影響視圖，你會(huì)不會(huì)覺得這就是Mvc庫呢，實(shí)則不然，因?yàn)樗€差一個(gè)重要的C(也就是控制器)。以下是鄙人對(duì)Mvc的個(gè)人理解，如有失誤還請(qǐng)各位道友指正。

• M：模型用于表示各種事物及事物特性的數(shù)據(jù)

• v：view + viewModel，此處鄙人認(rèn)為v不能單純的理解為視圖，而應(yīng)該是視圖+視圖模型。

• c：控制器，用于協(xié)調(diào)M與v之間的關(guān)系。

第一部分：我對(duì)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:'