一、 前言
在項目如何使用vuex呢？以前我都是非模塊末去寫的，可能大家和我一樣也是這么去寫，但是回過頭去看看vue的文檔，發(fā)現(xiàn)模塊化去使用vuex更好，vue是單頁面應(yīng)用，其實只有一個頁面，那么首頁也好列表頁也好，那都相當于這一個頁面的一個模塊，也可以把它理解為是一個一個的組件，畢竟組件化、組件抽離、組件封裝是比較火的，所以在使用vuex的模塊化的時候就能更好的去管理對應(yīng)的模塊，對于數(shù)據(jù)分離和定位都非常的好。廢話有點多，先丟張圖。
Demo連接： https://github.com/cookie-zhang/vuex_Demo
通信之間還是比較麻煩的，所以誕生了vuex。
二、 啥是vuex？
有人說是一個插件、有人說是一個倉庫。官方說的就比較好理解，Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的 狀態(tài)管理模式 。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。其實它就是對vue做數(shù)據(jù)管理的，更好的存儲數(shù)據(jù)、相應(yīng)數(shù)據(jù)。
三、 什么時候最適合使用vuex？
應(yīng)用官方語言：Vuex 可以幫助我們管理共享狀態(tài)，并附帶了更多的概念和框架。這需要對短期和長期效益進行權(quán)衡。如果您不打算開發(fā)大型單頁應(yīng)用，使用 Vuex 可能是繁瑣冗余的。確實是如此——如果您的應(yīng)用夠簡單，您最好不要使用 Vuex。一個簡單的store模式就足夠您所需了，但是，如果您需要構(gòu)建一個大型單頁應(yīng)用，您很可能會考慮如何更好的在組件外部管理狀態(tài)，Vuex將會成為自然選擇。
四、 由圖講原理
四大核心模塊：
五、上Demo
初始化項目就不講了，根據(jù)文檔一步一步生成就可以了
目錄結(jié)構(gòu)：
頁面展示
模塊化數(shù)據(jù)
首先在store里面創(chuàng)建modudel文件夾，分別創(chuàng)建homeDataStore.js和listDataStore.js,這兩個模塊就是分別存儲對應(yīng)頁面的數(shù)據(jù)，以上頁面展示可以看到我只在list頁面寫了數(shù)據(jù)，所以我們就把list頁面座位例子來講。
listDataStore.js代碼展示
重慶分公司
重慶分公司
import axios from 'axios'
const listData = {
namespaced:true,//注意 模塊化管理數(shù)據(jù)請不要忘了命名空間的開啟
state:{
List:[],
count: 0,
compoentData:[],
number: 0
},
actions:{
getListData(context){
new Promise((resolve,reject)=>{
axios.get('../../../static/listData.json').then((res)=>{
context.commit('ListData',{'listDatas': res.data.listData})
})
})
},
handleAdd(context){
context.commit("handleAddState")
}
},
mutations:{
ListData(state, paylod){
state.List = paylod.listDatas
},
handleAddState(state){
state.number++;
}
},
getters: {
List: state => state.List,
count: state => state.count,
number: state => state.number
}
}
export default listData;另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
