vue2.0 练习项目-外卖APP(2)

Z时代
2024-01-10
分类：综合

vue

　　今天终于把商品页和购物车功能弄出来了，在这个开发过程中遇到一些小坑，比如购物车和商品页是分开两个组件的，没有利用到vue的双向数据绑定的特性，导致在操作加减商品数量时两个组件的数据没有同步，后来我就重写了一遍，好好的利用了vuex的状态保持，这个东西真的很好用。先秀一段我写的vuex代码吧！

 1 //状态管理
 2 export default (Vuex) => {
 3     return new Vuex.Store({
 4         state: {
 5             totalMoney: 0, //已选购商品总价格
 6             productArray: [] //已选购商品数组
 7         },
 8         mutations: {
 9             setTotalMoney(state, num) { //设置商品总价格
10                 state.totalMoney = num;
11             },
12             mathTotalMoney(state) { //计算已选购商品总价格
13                 let total = 0;
14                 for (let i = 0; i < state.productArray.length; i++) {
15                     let item = state.productArray[i];
16                     total += (item.count * item.price);
17                 }
18                 state.totalMoney = total;
19             },
20             setProductArray(state, obj) { //商品放入或拿出购物车
21                 let index = -1;
22                 for (let i = 0; i < state.productArray.length; i++) {
23                     var item = state.productArray[i];
24                     if (obj.id == item.id) {
25                         index = i;
26                         break;
27                     }
28                 }
29                 if (index >= 0) {
30                     if (obj.count <= 0) {
31                         state.productArray.splice(index, 1);
32                     } else {
33                         state.productArray[index] = obj;
34                     }
35                 } else {
36                     state.productArray.push(obj);
37                 }
38             },
39             clearProduct(state) { //清空购物车
40                 state.productArray = [];
41             }
42         },
43         getters: {
44             getTotalMoney(state) { //获取商品总价格
45                 return state.totalMoney;
46             },
47             getProductArray(state) { //获取已选购商品
48                 return state.productArray;
49             },
50             getProductById: (state, getters) => (id) => { //根据ID获取已选商品
51                 for (let i = 0; i < state.productArray.length; i++) {
52                     var item = state.productArray[i];
53                     if (item.id == id) {
54                         return item;
55                     }
56                 }
57                 return false;
58             }
59         }
60     });
61 }

　　不过我总觉得，我这样的用法有点不太对的。贴个代码，希望有高手指点下，我这样使用vuex可取不。

 1 import Vue from \'vue\';
 2 import App from \'./App\';
 3 import router from \'./router\';
 4 import VueResource from \'vue-resource\';
 5 import Vuex from \'vuex\';
 6 import vuex_store from \'./store\';
 7 
 8 Vue.use(VueResource);
 9 Vue.use(Vuex);
10 
11 new Vue({
12     el: \'#app\',
13     router,
14     template: \'<App/>\',
15     components: { App },
16     store: vuex_store(Vuex)
17 });