購物車業務邏輯(vuex)

2022-09-11 14:06:29 字數 623 閱讀 5193

list(列表頁):

1:傳送ajax請求,獲取相應的資料

2:給每乙個上平新增乙個點選事件

3:每乙個商品都要有乙個id

4:當點選商品時,將商品id值傳遞給詳情頁

details(詳情頁):

1:當進入詳情頁的時候通過url位址拿到商品的id

2:傳送ajax請求,從資料庫中獲取id相對應的商品,進行返回

3:特殊情況:

在列表頁有該商品的詳細資訊,我們可以通過id值和快取中的資料進行對比拿到相對應的商品資訊

4:加入購物車:

a:使用者登入的情況下:

將商品的id以及商品的資料存入資料庫

b:使用者非登入的情況下:

將商品的id以及商品的數量存入localstorage中,當使用者登入後將localstorage裡面的資料存入資料庫

購物車頁面:

1:非登入的情況下,從localstorage中將資料獲取,渲染到頁面上

2:登入情況下,根據使用者的id找到使用者新增到購物車的商品驚醒返回,渲染到頁面

3:當使用者對商品進行操作的時候,將操作的資訊儲存到本地,然後存入資料庫

vuex實現購物車邏輯

在小型專案中,元件與元件之間通訊比較簡單。父元件可以使用pros向子元件傳遞資料,子元件可以通過 emit向父元件傳遞事件和資料,一旦狀態管理多了,就會變得十分混亂。由於狀態零散的分布在許多元件和元件之間的互動中,大型應用複雜度也經常逐漸增長。vuex狀態管理庫可以很方便的統一管理專案的狀態,無論是...

Vuex案例 購物車

購物車 demo,帶你理解並使用 vuex 狀態管理 購物車 vuex 中建立兩個模組,分別用來記錄商品列表和購物車的狀態,store 的結構 store modules cart.js production.js index.js 檢視結構 view cart index.vue home ind...

Vuex購物車資料狀態管理

vuex是乙個專為vue.js應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態,這裡的狀態在一定程度上可以理解成資料狀態。vuex可以理解成乙個可以供獲取和修改的公共共享資料倉儲。import vuex from vuex vue.use vuex var store newvu...