用vuex做购物车功能

第一种利用数组长度显示

1.适合单页面
2.思路：就是利用开关思想，数组长度及v-if

第二种利用vuex共同管理状态

<view class="each" v-for="(item,index) in items" @click="selectCli(item)">
<view class="boxPic">
<image class="img" :src="item.pic"></image>
</view>
<view class="info">
<view class="txt">{{item.txt}}</view>
<view class="price">￥198.00</view>
</view>
<view class="icon" v-if="item.flag">
<span class="iconfont icon-check"></span>
</view>
</view>
<view class="creButton">
<button type="primary">确定</button>
</view>
<view class="storePic">
<image class="pic" src="../static/images/store.png"></image>
<text id="txt">{{list.length}}</text>
</view>
</view>
</template>

methods: {
selectCli(item) {
this.list = [];
item.flag = !item.flag
this.items.forEach(item => {
if(item.flag == true) {
this.list.length += 1;
}
})
}
},

## vuex
methods: {
selectCli(item) {
this.allNum = 0;
item.flag = !item.flag
this.items.forEach(item => {
if(item.flag == true) {
// this.list.length += 1;
this.allNum += 1;
this.$store.commit('addNum',this.allNum)
console.log(this.allNum);
}
})
}
},

//在store文件夹index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
allNum: 0
},
mutations: {
addNum(state, layload) {
state.allNum = layload;
}
},
actions: {}
})
export default store