vuex 之 概念和作用解析

vuex就是為了提供這樣乙個在多個元件間共享狀態的外掛程式

例如:使用者的登入狀態,使用者名稱,頭像,地理位置資訊等

例如商品的收藏,購物中的物品等等

這些狀態資訊,可以放在統一的地方,對它進行儲存和管理,而且還是響應式的

npm install vuex -s

import vue from "vue";

import store from "./store/index.js";
vue.config.productiontip = false;
new vue( from "./mutations-type";
//1安裝外掛程式
vue.use(vx);
const modulea = ,
mutations: ,
},getters: ,
fullname3(state, getter, rootstate) ,
},actions: , 1000);
},incrementrootsum() 
},},
};const moduleb = ,
mutations: {},
};//2建立物件
const store = new vx.store(,,,
,],info: ,
},mutations: ,
decrement(state) ,
incrementcount(state, count) ,
addstudent(state, stu) ,
test(state, payload) ,
updateinfo(state) , 1000);
state.counter = "";
},},
getters: ,
more20stu(state) ,
more20stulength(state, getters) ,
moreagestu(state) ;
},},
actions: , 1000);
return new promise((resolve, reject) =>  else 
}, 1000);
});},
},modules: ,
});//3匯出store獨享
export default store;
mutations-type.js
export const increment = "increment";

(1)state   狀態樹

1>vuex提出使用單一狀態樹,什麼是單一狀態樹?

英文名稱是single source of truth  也可以翻譯為單一資料來源

(2)getters  

1> 類似於計算屬性

如上面的簡單案例**中的使用

2>getters作為引數和傳遞引數

如上面的簡單案例**中的使用

(3)mutations  狀態更新

1>官方:修改state的值肯定是在mutations中進行

引數被稱為是mutation的載荷(payload)

2>mutations 簡單使用(不帶引數)

如上面的簡單案例**中的使用

3>mutations 攜帶引數

如上面的簡單案例**中的使用

4>若引數不是乙個呢? 

有時候需要用到多個引數,那麼就會以物件的形式傳遞,也就是payload是乙個物件,這樣就可以從物件獲取

5>mutation提交風格

上面是通過commit進行提交是一種普通的方式

vue還提供了另外一種風格,他是乙個包含type屬性的物件

6>mutation響應規則  

vuex的store是響應式的,當state中的資料改變時,vue元件會更新

(1).提前在store中初始化好所需的屬性

(2).當給state中的物件新增新屬性時,使用下面的方式

方式一:使用vue.set(obj,'newprop',123)

方式二:用新物件給舊物件重新賦值

在state中,實際上,這裡的info各種屬性在定義時,就會自動掛載到響應式系統中,只要而響應式系統會監聽這些屬性的變化,當屬性發生變化是,就會通知所有用到該屬性的頁面進行重新整理

info:
在mutation中
updateinfo(state)

如上面的簡單案例**中的使用(就是建立 mutations-type.js來處理)  

8>mutation同步函式

devtools可以幫助撲捉mutation的快照

若是非同步操作,那麼devtools將不能很好的追蹤這個操作什麼時候會被完成,通過銅鼓vue工具看時,裡面的state沒有變化,實際頁面已經發生變化了

(4)actions

1>基本定義

actions類似於mutation,但是是用來替代mutation進行非同步操作的,可以解決mutation同步函式問題

2>基本使用

如上面的簡單案例**中的使用(dispatch部分)

(5)modules　

1>module是模組的意思,為什麼要用到模組呢?

1.因為使用單一狀態樹,也就意味著很多模組都會交給vuex來管理

2.當應用變得非常複雜時,store物件就會變得相當臃腫

3.為了解決該問題,vuex允許我們將store分割成模組,而每個模組擁有自己的state,mutations,actions,getters等

如上面的簡單案例**中的使用(modulea部分)

合理的專案結構

vuex概念之State用法詳解

假設有如下state定義 在元件中直接訪問 this.store.state.count使用物件展開運算子，會預設傳遞引數state，在函式中直接使用就可以了。這樣就可以少些2個單詞了 this.store mapstate 為了能夠使用 this 獲取元件自己的data資料，必須使用常規函式 ma...

vue的vuex解析（一）之vuex的安裝及引入

官網解釋 vuex是乙個專為 vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可 的方式發生變化。個人理解 vuex其實就是乙個狀態管理器，它能夠實現元件間的資料共享，元件間的資料通訊。一 vue專案中vuex的安裝指令 npm ins...

uwsgi概念和作用

wsgi wsgi是一種web伺服器 閘道器介面 是乙個web伺服器 如nginx 與應用伺服器 如uwsgi 通訊的一種規範 協議 uwsgi uwsgi實現了wsgi的所有介面，是乙個快速 自我修復 開發人員和系統管理員友好的伺服器。uwsgi 完全用c編寫，效率高 效能穩定。uwsgi是一種線...