這篇文章主要介紹vue組件化開發(fā)種vuex狀態(tài)管理庫的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

為宜春等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及宜春網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、宜春網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。Vuex 也集成到 Vue 的官方調(diào)試工具 devtools extension，提供了諸如零配置的 time-travel 調(diào)試、狀態(tài)快照導(dǎo)入導(dǎo)出等高級調(diào)試功能。

以上是vuex的官方文檔對vuex的介紹，官方文檔對vuex的用法進(jìn)行了詳細(xì)的說明。這里就不再細(xì)講vuex的各個(gè)用法，寫這篇博客的目的只是幫助部分同學(xué)更快地理解并上手vuex。

為什么要用vuex

不知道現(xiàn)在讀這篇博客的同學(xué)是否有看過Vue2.0子父組件之間通信，子父組件之間的基本通信方式。我們通信的目的往往就是在組件之間傳遞數(shù)據(jù)或組件的狀態(tài)（這里將數(shù)據(jù)和狀態(tài)統(tǒng)稱為狀態(tài)），進(jìn)而更改狀態(tài)。但可以看到如果我們通過最基本的方式來進(jìn)行通信，一旦需要管理的狀態(tài)多了，代碼就會(huì)變得十分混亂。對所有狀態(tài)的管理便會(huì)顯得力不從心，尤其是多人合作的時(shí)候。

此時(shí)vuex出現(xiàn)了，他就是幫助我們把公用的狀態(tài)全抽出來放在vuex的容器中，然后根據(jù)一定的規(guī)則來進(jìn)行管理

Vuex的核心

vuex由以下幾部分組成：

1. state

2. mutations

3. getters

4. actions

5. modules

state里面就是存放項(xiàng)目中需要多組件共享的狀態(tài)

mutations就是存放更改state里狀態(tài)的方法

getters就是從state中派生出狀態(tài)，比如將state中的某個(gè)狀態(tài)進(jìn)行過濾然后獲取新的狀態(tài)。

actions就是mutation的加強(qiáng)版，它可以通過commit mutations中的方法來改變狀態(tài)，最重要的是它可以進(jìn)行異步操作。

modules顧名思義，就是當(dāng)用這個(gè)容器來裝這些狀態(tài)還是顯得混亂的時(shí)候，我們就可以把容器分成幾塊，把狀態(tài)和管理規(guī)則分類來裝。這和我們創(chuàng)建js模塊是一個(gè)目的，讓代碼結(jié)構(gòu)更清晰。

實(shí)例來理解Vuex

// 實(shí)例化vuex狀態(tài)庫
var vuexStore = new Vuex.Store({
 state:{
  message:'Hello World',
  bookList:[
   {
    name:'javascript權(quán)威指南',
    price:100,
    en:'jq'
   },
   {
    name:'angularjs權(quán)威指南',
    price:80,
    en:'aq'
   },
   {
    name:'HTTP權(quán)威指南',
    price:50,
    en:'hq'
   }
  ]
 },
 mutations:{
  //同步
  showMessage:function(state,data){
   state.message = 'Store mutations changed this words。'+data;
  }
  addBook:function(state,data){
   state.bookList.push(data)
  }
 },
 getters:{
  filterPrice:function(state){
   var narr = [];
   for(var i = 0;i
【state】vuex核心概念有五個(gè)，試想當(dāng)我們把所有的狀態(tài)從各個(gè)組件抽出來，放入了state中：message和bookList；
【mutations】某個(gè)時(shí)候，某個(gè)組件中，我們需要把state中的message改變數(shù)據(jù)，我們要通過調(diào)用commit方法提交到mutations對應(yīng)的事件：commit('showMessage'),這樣就會(huì)調(diào)用mutations里showMessage方法；調(diào)用方法是如上面代碼中57行的方式；
【getters】某個(gè)時(shí)間，某個(gè)組件我們需要獲得bookList中價(jià)格小于85的所有數(shù)據(jù)，vuex中允許我們通過getters來獲?。菏褂梅椒ㄈ缟洗a中60行
【actions】這個(gè)是mutations的強(qiáng)化部分，只是這個(gè)里面的函數(shù)可以異步操作，比如網(wǎng)絡(luò)請求等等；這里面的方法如果要更改狀態(tài)，最好要通過commit()函數(shù)提交到mutations里去處理。官方是這么說的。在實(shí)例里調(diào)用一般是通過dispatch('funName')來調(diào)用的；例如實(shí)例中：66行代碼
【關(guān)于moduls】modules其實(shí)就是多個(gè)狀態(tài)管理庫，放在一個(gè)對象里，比如我們有2個(gè)狀態(tài)庫：storeA，storeB。我們在modules里就和上面代碼中50行的寫法是一樣的。
在取值的時(shí)候就直接在實(shí)例里調(diào)用：this.$store.state.a即可返回storeA這個(gè)store里的狀態(tài)。
這里有一個(gè)點(diǎn)要注意一下：所有子模塊里的getters對象里的方法會(huì)被合并到$store里，如果不同子模塊里有重名的方法，那么會(huì)報(bào)錯(cuò)；
但是所有子模塊里actions和mutations中的方法不會(huì)被合并，重名也不會(huì)報(bào)錯(cuò)。但是當(dāng)你dispatch或者commit一個(gè)同名的事件的時(shí)候，會(huì)依次執(zhí)行每一個(gè)子模塊中的事件。
所以在不同子模塊的actions和mutations中不要寫重復(fù)的函數(shù)名稱；
使用Vuex
下面我們來講一下怎么引入一個(gè)Vuex協(xié)助我們管理狀態(tài)：
首先當(dāng)然要引入Vuex.js；
然后,我們新建一個(gè)vuex實(shí)例
 var store = new VuexStore({
 state:{
  } ,
  mountations:{
  },  
 })
創(chuàng)建好store后我們需要把這個(gè)store注入到vue的實(shí)例和組件中，
 var vm = new Vue({
 el:'#app',
 store:store 
 })
然后我們就能像上面介紹的方法使用了。
以上是“vue組件化開發(fā)種vuex狀態(tài)管理庫的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
            

            分享文章：vue組件化開發(fā)種vuex狀態(tài)管理庫的示例分析-創(chuàng)新互聯(lián)            

            當(dāng)前網(wǎng)址：http://weahome.cn/article/ppsjs.html