前言：
為了回顧學習的vue內容，將視頻中一個大的項目里的購物車這一塊單獨拎出來寫了個小demo。說難也不難，就是對所學的vue知識進行了個整合，實現了三個界面間的操作以及狀態管理，但是說簡單也不簡單，雖然有點基礎但寫下來還是有些吃力。總的來說，這個小demo寫完，對於vue算是能夠獨立上手了，也養成了看官方文檔進行系統性的學習的習慣。本篇僅單獨詳細寫vuex的使用。
源代碼於git上取：我的git 下載后請先看README.md文件
項目結構（紅框為主要內容）
靜態效果圖：
vuex
Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension ，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。
引入
npm i vuex -S
import Vuex from 'vuex'
Vue.use(Vuex)
基本使用
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
optCount (state,newValue) {
state.count = newValue
}
},
getters:{
getCount(state){
return '當前最新數據'+state.count
}
}
})
state
vuex中的數據源，我們需要保存的數據就保存在這里，可以在頁面通過this.$store.state來獲取我們定義的數據；
mutations
如果需要修改store中的值唯一的方法就是提交mutation來修改。
可以通過調用this.$store.commit('方法名', '唯一的參數')來實現，例：
this.$store.commit('optCount', 1)
getters
Getter相當於vue中的computed計算屬性，getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變才會被重新計算。
Getters 可以用於監聽、state中的值的變化，返回計算后的結果。可以通過this.$store.getters.getCount來獲取state中的數據
購物車種vuex的使用
該項目中我們使用vuex對購物車中的商品信息進行狀態管理，所以只需要考慮用戶對car的操作即可
邏輯結構圖
vuex引入
import Vuex from 'vuex'
Vue.use(Vuex)
//car數據從本地瀏覽器存儲中獲取
var car = JSON.parse(localStorage.getItem('car') || '[]')
const store = new Vuex.Store({
})
state
state: {
car: car
},
getters
getters: { // this.$store.getters.方法名
//得到購物車中已選擇的商品總量，用於在底部購物車圖標上方的小紅圈中顯示
getProdsSelectedCount(state) {
var count = 0;
state.car.forEach(item => {
if (item.selected) {
count += item.count
}
})
return count
},
//得到購物車種各個商品的數量，用於在購物車界面numbox中顯示商品當前購買數量
//返回數組，根據商品id來獲取其數購買量$store.getters.getProdsCount[item.id]
getProdsCount(state) {
var o = []
state.car.forEach(item => {
o[item.id] = item.count
})
return o
},
//得到購物車種各個商品的選擇狀態，用於在購物車界面設置商品的選中狀態
//返回數組，根據商品id來獲取其選中狀態$store.getters.getProdsSelected[item.id]
getProdsSelected(state) {
var o = []
state.car.forEach(item => {
o[item.id] = item.selected
})
return o
},
//得到購物車總的選擇數量和總價，用於在結算框中顯示
getGoodsCountAndAmount(state) {
var o = {
count: 0, // 勾選的數量
amount: 0 // 勾選的總價
}
state.car.forEach(item => {
if (item.selected) {
o.count += item.count
o.amount += item.price * item.count
}
})
return o
}
}
mutations
mutations: { //this.$store.commit('方法名', '唯一的參數')
// 商品頁面'加入購物車'操作
addToCar(state, product) {
//判斷是否已存在
var flag = false
state.car.some(item => {
if (item.id == product.id) {
item.count += parseInt(product.count)
flag = true
return true
}
})
// 不存在,則添加
if (!flag) {
state.car.push(product)
}
//更新本地的localStorage
localStorage.setItem('car', JSON.stringify(state.car))
},
//購物車界面刪除商品
removeFormCar(state, id) {
// 根據Id，從store 中的購物車中刪除對應的那條商品數據
state.car.some((item, i) => {
if (item.id == id) {
state.car.splice(i, 1)
return true;
}
})
// 將刪除完畢后的，最新的購物車數據，同步到 本地存儲中
localStorage.setItem('car', JSON.stringify(state.car))
},
// 購物車中更新商品的選中狀態
updateProdsSelected(state, info) {
state.car.some(item => {
if (item.id == info.id) {
item.selected = info.selected
}
})
localStorage.setItem('car', JSON.stringify(state.car))
},
//購物車種更新商品的購買數量
updateprodsInfo(state, info) {
state.car.some(item => {
if (item.id == info.id) {
item.count = info.count
}
})
localStorage.setItem('car', JSON.stringify(state.car))
},
},