18.vuex · 程序員開發筆記

[TOC] 注意下面都需要引入vuex.js #### 1.vuex之vuex的使用場景分析與state購物車實例講解注意需要引入vuex.js <div id="hdcms"> <lists></lists> </div> <script type="text/x-template" id="Lists"> <div> <table border="1" width="90%"> <tr><th>編號</th><th>名稱</th><th>價格</th></tr> <tr v-for="v in goods"> <td>{{v.id}}</td> <td>{{v.title}}</td> <td>{{v.price}}</td> </tr> </table> <h1>總價: {{totalPrice}}</h1> </div> </script> <script> let Lists = { template: '#Lists', computed: { totalPrice(){ return this.$store.state.totalPrice; }, goods(){ return this.$store.state.goods; } } } let store = new Vuex.Store({ state: { totalPrice: 100, goods: [ {id: 1, title: 'iphone7Plus', price: 399}, {id: 2, title: 'hdcms系統', price: 1999}, ] } }); var app = new Vue({ el: '#hdcms', store, components: { Lists } }) </script> #### 2.vuex之使用getters高效的獲取購物車商品總價 <div id="hdcms"> <lists></lists> </div> <script type="text/x-template" id="Lists"> <div> <h1>購物車</h1> <table border="1" width="90%"> <tr> <th>編號</th> <th>名稱</th> <th>價格</th> <th>數量</th> <th>總計</th> </tr> <tr v-for="v in goods"> <td>{{v.id}}</td> <td>{{v.title}}</td> <td>{{v.price}}</td> <td>{{v.num}}</td> <td></td> </tr> </table> <h1>總價: {{totalPrice}}</h1> </div> </script> <script> let Lists = { template: '#Lists', computed: { totalPrice(){ return this.$store.getters.totalPrice; }, goods(){ return this.$store.state.goods; } } } let store = new Vuex.Store({ state: { goods: [ {id: 1, title: 'iphone7Plus', price: 399, num: 3}, {id: 2, title: 'hdcms系統', price: 1999, num: 6}, ] }, getters: { //獲取商品總價 totalPrice: state => { let totalPrice = 0; state.goods.forEach((v) => { totalPrice += v.num * v.price; }) return totalPrice; } } }); var app = new Vue({ el: '#hdcms', store, components: { Lists } }) </script> #### 3.vuex之使用getters計算每一件購物車中商品的總價 <div id="hdcms"> <lists></lists> </div> <script type="text/x-template" id="Lists"> <div> <h1>購物車</h1> <table border="1" width="90%"> <tr> <th>編號</th> <th>名稱</th> <th>價格</th> <th>數量</th> <th>總計</th> </tr> <tr v-for="v in goods"> <td>{{v.id}}</td> <td>{{v.title}}</td> <td>{{v.price}}</td> <td>{{v.num}}</td> <td>{{v.totalPrice}}</td> </tr> </table> <h1>總價: {{totalPrice}}</h1> </div> </script> <script> let Lists = { template: '#Lists', computed: { totalPrice(){ return this.$store.getters.totalPrice; }, goods(){ return this.$store.getters.goods; } } } let store = new Vuex.Store({ state: { goods: [ {id: 1, title: 'iphone7Plus', price: 300, num: 3}, {id: 2, title: 'hdcms系統', price: 1999, num: 6}, ] }, getters: { //獲取商品總價 totalPrice: state => { let totalPrice = 0; state.goods.forEach((v) => { totalPrice += v.num * v.price; }) return totalPrice; }, //獲取商品并計算每件商品的總價 goods(state){ let goods = state.goods; goods.forEach((v)=>{ v.totalPrice = v.num*v.price; }); return goods; } } }); var app = new Vue({ el: '#hdcms', store, components: { Lists } }) </script> #### 4.vuex之將購物車底部生成新組件用于統計總價 <div id="hdcms"> <lists></lists> <footer-cart></footer-cart> </div> <script type="text/x-template" id="Lists"> <div> <h1>購物車</h1> <table border="1" width="90%"> <tr> <th>編號</th> <th>名稱</th> <th>價格</th> <th>數量</th> <th>總計</th> </tr> <tr v-for="v in goods"> <td>{{v.id}}</td> <td>{{v.title}}</td> <td>{{v.price}}</td> <td> <input type="text" v-model="v.num"> </td> <td>{{v.totalPrice}}</td> </tr> </table> </div> </script> <script type="text/x-template" id="footerCart"> <div class="footerCart"> 總計: {{totalPrice}} </div> </script> <style> .footerCart{background: #999;color:#fff;} </style> <script> let Lists = { template: '#Lists', computed: { goods(){ return this.$store.getters.goods; } } } let footerCart={ template:'#footerCart', computed:{ totalPrice(){ return this.$store.getters.totalPrice; } } } let store = new Vuex.Store({ state: { goods: [ {id: 1, title: 'iphone7Plus', price: 300, num: 3}, {id: 2, title: 'hdcms系統', price: 1999, num: 6}, ] }, getters: { //獲取商品總價 totalPrice: state => { let totalPrice = 0; state.goods.forEach((v) => { totalPrice += v.num * v.price; }) return totalPrice; }, //獲取商品并計算每件商品的總價 goods(state){ let goods = state.goods; goods.forEach((v)=>{ v.totalPrice = v.num*v.price; }); return goods; } } }); var app = new Vue({ el: '#hdcms', store, components: { Lists,footerCart } }) </script> #### 5.vuex之使用mutations修改購物車倉庫數據 <div id="hdcms"> <lists></lists> <footer-cart></footer-cart> </div> <script type="text/x-template" id="Lists"> <div> <h1 v-if="goods.length==0">購物車中沒有商品,<a href="http://www.baidu.com">去購物吧...</a></h1> <div v-if="goods.length>0"> <h1>購物車</h1> <table border="1" width="90%"> <tr> <th>編號</th> <th>名稱</th> <th>價格</th> <th>數量</th> <th>總計</th> <th>操作</th> </tr> <tr v-for="v in goods"> <td>{{v.id}}</td> <td>{{v.title}}</td> <td>{{v.price}}</td> <td> <input type="text" v-model="v.num"> </td> <td>{{v.totalPrice}}</td> <td> <button @click="del(v.id)">刪除</button> </td> </tr> </table> </div> </div> </script> <script type="text/x-template" id="footerCart"> <div class="footerCart"> <div v-if="totalPrice>0"> 總計: {{totalPrice}} </div> </div> </script> <style> .footerCart{background: #999;color:#fff;} </style> <script> let Lists = { template: '#Lists', computed: { goods(){ return this.$store.getters.goods; } }, methods:{ del(id){ this.$store.commit('del',{id}) } } } let footerCart={ template:'#footerCart', computed:{ totalPrice(){ return this.$store.getters.totalPrice; } } } let store = new Vuex.Store({ state: { goods: [ {id: 1, title: 'iphone7Plus', price: 300, num: 3}, {id: 2, title: 'hdcms系統', price: 1999, num: 6}, ] }, getters: { //獲取商品總價 totalPrice: state => { let totalPrice = 0; state.goods.forEach((v) => { totalPrice += v.num * v.price; }) return totalPrice; }, //獲取商品并計算每件商品的總價 goods(state){ let goods = state.goods; goods.forEach((v)=>{ v.totalPrice = v.num*v.price; }); return goods; } }, mutations:{ //刪除購物車中的商品 del(state,param){ let k; for(let i=0;i<state.goods.length;i++){ if(state.goods[i].id==param.id){ k=i;break; } } state.goods.splice(k,1); } } }); var app = new Vue({ el: '#hdcms', store, components: { Lists,footerCart } }) </script> #### 6.vuex之使用actions與axios異步初始購物車數據需要引入vuex.js 和axios.js <div id="hdcms"> <lists></lists> <footer-cart></footer-cart> </div> <script type="text/x-template" id="Lists"> <div> <h1 v-if="goods.length==0">購物車中沒有商品,<a href="http://www.baidu.com">去購物吧...</a></h1> <div v-if="goods.length>0"> <h1>購物車</h1> <table border="1" width="90%"> <tr> <th>編號</th> <th>名稱</th> <th>價格</th> <th>數量</th> <th>總計</th> <th>操作</th> </tr> <tr v-for="v in goods"> <td>{{v.id}}</td> <td>{{v.title}}</td> <td>{{v.price}}</td> <td> <input type="text" v-model="v.num"> </td> <td>{{v.totalPrice}}</td> <td> <button @click="del(v.id)">刪除</button> </td> </tr> </table> </div> </div> </script> <script type="text/x-template" id="footerCart"> <div class="footerCart"> <div v-if="totalPrice>0"> 總計: {{totalPrice}} </div> </div> </script> <style> .footerCart { background: #999; color: #fff; } </style> <script> let Lists = { template: '#Lists', computed: { goods(){ return this.$store.getters.goods; } }, methods: { del(id){ this.$store.commit('del', {id}) } } } let footerCart = { template: '#footerCart', computed: { totalPrice(){ return this.$store.getters.totalPrice; } } } let store = new Vuex.Store({ state: { goods: [] }, getters: { //獲取商品總價 totalPrice: state => { let totalPrice = 0; state.goods.forEach((v) => { totalPrice += v.num * v.price; }) return totalPrice; }, //獲取商品并計算每件商品的總價 goods(state){ let goods = state.goods; goods.forEach((v) => { v.totalPrice = v.num * v.price; }); return goods; } }, mutations: { //刪除購物車中的商品 del(state, param){ let k; for (let i = 0; i < state.goods.length; i++) { if (state.goods[i].id == param.id) { k = i; break; } } state.goods.splice(k, 1); }, setGoods(state,param){ state.goods=param.goods; } }, actions: { loadGoods(store){ axios.get('73.php').then(function (response) { store.commit('setGoods',{goods:response.data}) console.log(response); }); } } }); var app = new Vue({ el: '#hdcms', store, components: { Lists, footerCart }, mounted(){ this.$store.dispatch('loadGoods'); } }) </script> php代碼： <?php $data = [ ['id' => 1, 'title' => 'iphone7Plus', 'price' => 300, 'num' => 3], ['id' => 2, 'title' => 'hdcms系統', 'price' => 1999, 'num' => 9], ]; echo json_encode($data); #### 7.vuex之模塊化modules開發實例講解需要引入vuex.js 和axios.js 當使用命名空間的時候，模塊里面的getters，mutations，actions，就不是全局了。 <div id="hdcms"> <lists></lists> <footer-cart></footer-cart> </div> <script type="text/x-template" id="Lists"> <div> <h1 v-if="goods.length==0">購物車中沒有商品,<a href="http://www.baidu.com">去購物吧...</a></h1> <div v-if="goods.length>0"> <h1>購物車</h1> <table border="1" width="90%"> <tr> <th>編號</th> <th>名稱</th> <th>價格</th> <th>數量</th> <th>總計</th> <th>操作</th> </tr> <tr v-for="v in goods"> <td>{{v.id}}</td> <td>{{v.title}}</td> <td>{{v.price}}</td> <td> <input type="text" v-model="v.num"> </td> <td>{{v.totalPrice}}</td> <td> <button @click="del(v.id)">刪除</button> </td> </tr> </table> </div> </div> </script> <script type="text/x-template" id="footerCart"> <div class="footerCart"> <div v-if="totalPrice>0"> 總計: {{totalPrice}} </div> </div> </script> <style> .footerCart { background: #999; color: #fff; } </style> <script> let Lists = { template: '#Lists', computed: { goods(){ // console.log(this.$store.state.cart.goods); return this.$store.getters['cart/goods'] } }, methods: { del(id){ this.$store.commit('del', {id}) } } } let footerCart = { template: '#footerCart', computed: { totalPrice(){ return this.$store.getters['cart/totalPrice']; } } } const cartModule = { namespaced:true, state: { goods: [{id:12}] }, getters: { //獲取商品總價 totalPrice: state => { let totalPrice = 0; state.goods.forEach((v) => { totalPrice += v.num * v.price; }) return totalPrice; }, //獲取商品并計算每件商品的總價 goods(state){ let goods = state.goods; goods.forEach((v) => { v.totalPrice = v.num * v.price; }); return goods; } }, mutations: { //刪除購物車中的商品 del(state, param){ let k; for (let i = 0; i < state.goods.length; i++) { if (state.goods[i].id == param.id) { k = i; break; } } state.goods.splice(k, 1); }, setGoods(state,param){ state.goods=param.goods; } }, actions: { loadGoods(store){ axios.get('73.php').then(function (response) { store.commit('setGoods',{goods:response.data}) console.log(response); }); } } } let store = new Vuex.Store({ modules:{ cart:cartModule } }); var app = new Vue({ el: '#hdcms', store, components: { Lists, footerCart }, mounted(){ this.$store.dispatch('cart/loadGoods'); } }) </script>