執行 cnpm i vuex -s
import vuex from 『vuex』
vue.use(vuex)
var store = new vuex.store({})
在vm例項中掛載 store 狀態管理物件 store
addtoshopcar()
// 拼接出乙個，要儲存到 store 中 car 陣列裡的 商品資訊物件
var goodsinfo = ;
// 呼叫 store 中的 mutations 來將商品加入購物車
this.$store.commit("addtocar", goodsinfo);
}
}
購物車
getters: )
return c
}}
var car = json.parse(localstorage.getitem('car') || '')
當 更新 car 之後，把 car 陣列，儲存到 本地的 localstorage 中
localstorage.setitem('car', json.stringify(state.car))
借助於mui-master，examples,card.html。
複製乙個基礎的元件shopcar_numbox.vue，有選擇數量按鈕。可以直接加樣式style="height:25px;"改變高度
getgoodslist()
// 獲取購物車商品列表。join(",")根據介面文件需要傳入的辦法，用逗號分隔開傳過去
});}
getters:
getgoodscount(state)
state.car.foreach(item => )
return o
}mutations:
updategoodsinfo(state, goodsinfo)
})// 當修改完商品的數量，把最新的購物車資料，儲存到 本地儲存中
localstorage.setitem('car', json.stringify(state.car))
}
methods: );}},
props: ["initcount", "goodsid"]
刪除
remove(id, index)
main.js裡的store裡的mutations:
removeformcar(state, id)
})// 將刪除完畢後的，最新的購物車資料，同步到 本地儲存中
localstorage.setitem('car', json.stringify(state.car))
}
display: flex; //讓裡面豎著的的盒子一行排放
justify-content: space-between;//兩端對齊
align-items: center;//垂直居中
// $store.getters.getgoodsselected的值為（id為鍵，值為selected狀態）
//v-model=true時為開啟開關
元件裡的方法
selectedchanged(id, val) );
}
main.js裡
getters:
getgoodsselected(state)
state.car.foreach(item => )
return o
}mutations:
updategoodsselected(state, info)
})// 把最新的 所有購物車商品的狀態儲存到 store 中去
localstorage.setitem('car', json.stringify(state.car))
}
main.js中 getters:
getgoodscountandamount(state)
state.car.foreach(item =>
})return o
}元件裡：
已勾選商品 } 件， 總價 ￥}
返回
在tomcat安裝目錄下的conf資料夾找到server.xml檔案，在結尾處的前面加上
path為瀏覽器訪問目錄，docbase專案的虛擬根目錄
開啟tomcat伺服器，在瀏覽器訪問localhost:80即可看到該目錄
將專案託管到apache並啟用：
先把dist刪除，然後webpack打包會放到dist中，把dist中的index.html，bundle.js拷貝到docbase專案的虛擬根目錄
注意：如果沒有設定虛擬根目錄，放在預設的根目錄中
輸入172.0.0.1:80或者localhost:80即可看到本地
要讓apache支援gzip功能，要用到deflate_module和headers_module。開啟apache的配置檔案httpd.conf，大約在105行左右，找到以下兩行內容：（這兩行不是連續在一起的）
#loadmodule deflate_module modules/mod_deflate.so
#loadmodule headers_module modules/mod_headers.so
#必須的，就像乙個開關一樣，告訴apache對傳輸到瀏覽器的內容進行壓縮
setoutputfilter deflate
deflatecompressionlevel 9
開啟ngrok.exe,輸入ngrok http 80
注意 80 是專案執行的埠號
session status online時說明已經上線。其中forwarding後面的就是位址，直接輸入即可。
注意：由於預設使用的美國的伺服器進行中間轉接，所以訪問速度炒雞慢，訪問時可啟用f牆軟體，提高網頁開啟速度。
小公尺商城實戰vue專案 02
這一章 我們根據選單來開發子選單的首頁父元件 在views中建立 這個就是大體的框架 home.vue 需要配置路由，接著就是按照這種樣式，新增父元件，便好 router index.js import vue from vue import router from vue router vue.u...
vue2 0 練習專案 外賣APP 完
經過今天的努力，終於把這個專案做完了 功能不是很多，就三個頁面這樣子吧！在開發過程中也有遇到些小問題的。比如我在弄那個star評選星星元件時就遇到乙個問題了，在created事件中作資料請求是非同步的，而star控制中的created事件也只會執行一次，導致頁面在載入出來時分數值始終是0的。後面思考...
Vue2仿錘子商城實戰專案專案實戰
目錄,j7 x y m i p5 h 01 專案介紹.mp4 02 環境配置及目錄結構.mp4 03 商品列表頁的布局.mp4 04 商品列表套資料.mp4 n s w7 x s9 y8 s d5 h 05 商品頁元件.mp45 s l g r l v h 06 商品加入購物車.mp4 x9 n1 ...