這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)使用vuex如何實(shí)現(xiàn)一個(gè)購(gòu)物車功能，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

成都創(chuàng)新互聯(lián)是一家從事企業(yè)網(wǎng)站建設(shè)、成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、行業(yè)門(mén)戶網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)制作的專業(yè)網(wǎng)站建設(shè)公司，擁有經(jīng)驗(yàn)豐富的網(wǎng)站建設(shè)工程師和網(wǎng)頁(yè)設(shè)計(jì)人員，具備各種規(guī)模與類型網(wǎng)站建設(shè)的實(shí)力，在網(wǎng)站建設(shè)領(lǐng)域樹(shù)立了自己獨(dú)特的設(shè)計(jì)風(fēng)格。自公司成立以來(lái)曾獨(dú)立設(shè)計(jì)制作的站點(diǎn)上千余家。vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫(kù)只關(guān)注視圖層，方便與第三方庫(kù)和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)復(fù)雜的單頁(yè)應(yīng)用。

購(gòu)物車組件

<template>
  <div>
    <h2>vuex-shopCart</h2>
    <div class="shop-listbox">
      <shop-list/>
    </div>
    <h3>已選商品</h3>
    <div class="shop-cartbox">
      <shop-cart/>
    </div>
  </div>
</template>
<script>
  import shopList from "./shop-list";
  import shopCart from './shop-cart';
  export default{
    name:'shop',
    components:{
      'shop-list':shopList,
      'shop-cart':shopCart
    }
  }
</script>

商品列表

<template>
  <div class="shop-list">
    <table>
      <tr class="shop-listtitle">
        <td>id</td>
        <td>名稱</td>
        <td>價(jià)格</td>
        <td>操作</td>
      </tr>
      <tr v-for="item in shopList" class="shop-listinfo">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.price}}</td>
        <td><button @click="addToCart(item)">加入購(gòu)物車</button></td>
      </tr>
    </table>
  </div>
</template>
<script>
  import{mapActions} from "vuex";
  export default{
    name:'shopList',
    data(){
      return{
      }
    },
    computed:{
      shopList(){
        return this.$store.getters.getShopList
      }
    },
    methods:{
      ...mapActions(['addToCart'])
    }
  }
</script>
<style lang="less" scoped>
  @import url('../../static/public.less');
</style>

選中商品列表

<template>
  <div class="shop-list">
    <table>
      <tr class="shop-listtitle">
        <td>id</td>
        <td>名稱</td>
        <td>價(jià)格</td>
        <td>數(shù)量</td>
        <td>操作</td>
      </tr>
      <tr v-for="item in cartData" class="shop-listinfo">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.price}}</td>
        <td>{{item.num}}</td>
        <td><button class="shop-dele dele-btn" @click="deletShop(item)">刪除</button></td>
      </tr>
      <tr v-if="cartData.length<=0">
        <td colspan="5">暫無(wú)數(shù)據(jù)</td>
      </tr>
      <tr>
        <td colspan="2">總數(shù)：{{totalNum}}</td>
        <td colspan="2">總價(jià)格：{{totalPrice}}</td>
        <td><button class="dele-cart dele-btn" @click="clearCart">清空購(gòu)物車</button></td>
      </tr>
    </table>
  </div>
</template>
<script>
  import {mapGetters,mapActions} from "vuex";
  export default{
    name:'shopCart',
    data(){
      return{
      }
    },
    computed:{
      ...mapGetters({
        cartData:'addShopList',
        totalNum:'totalNum',
        totalPrice:'totalPrice'
      })
    },
    methods:{
      ...mapActions({
        clearCart:'clearToCart',
        deletShop:'deletToShop'
      })
    }
  }
</script>
<style lang="less" scoped>
  @import url('../../static/public.less');
  .dele-btn{
    background-color: red !important;
  }
  .dele-btn:hover{
    background-color: #bd0000 !important;
  }
</style>

vuex 創(chuàng)建

npm install vuex --save,創(chuàng)建vuex文件夾，在文件夾中創(chuàng)建store.js，引入vuex；

import Vue from "vue";
import Vuex from 'vuex';
import cart from "./modules/cart";
Vue.use(Vuex);
export default new Vuex.Store({
  modules:{
    cart
  }
})

建立一個(gè)模塊文件夾modules，里面創(chuàng)建創(chuàng)建當(dāng)個(gè)store模塊，然后默認(rèn)輸出，在store.js中引入；

const state = {
  shop_list: [{
    id: 11,
    name: '魚(yú)香肉絲',
    price: 12,
  }, {
    id: 22,
    name: '宮保雞丁',
    price: 14
  }, {
    id: 34,
    name: '土豆絲',
    price: 10
  }, {
    id: 47,
    name: '米飯',
    price: 2
  },{
    id: 49,
    name: '螞蟻上樹(shù)',
    price: 13
  },
  {
    id: 50,
    name: '臘肉炒蒜薹',
    price: 15
  }],
  add:[]
}
const getters ={
  //獲取商品列表
  getShopList:state => state.shop_list,
  //獲取購(gòu)物車列表
  addShopList:state => {
    return state.add.map(({id,num})=>{
      let product = state.shop_list.find(n => n.id == id);
      if(product){
        return{
          ...product,
          num
        }
      }
    })
  },
  //獲取總數(shù)量
  totalNum:(state,getters) =>{
    let total =0;
    getters.addShopList.map(n=>{
      total += n.num;
    })
    return total;
  },
  //計(jì)算總價(jià)格
  totalPrice:(state,getters)=>{
    let total=0;
    getters.addShopList.map(n=>{
      total += n.num*n.price
    })
    return total;
  },
}
const actions={
  //加入購(gòu)物車
  addToCart({commit},product){
    commit('addCart',{
      id:product.id
    })
  },
  //清空購(gòu)物車
  clearToCart({commit}){
    commit('clearCart')
  },
  //刪除單個(gè)物品
  deletToShop({commit},product){
    commit('deletShop',product)
  }
}
const mutations ={
  //加入購(gòu)物車
  addCart(state,{id}){
    let record = state.add.find(n => n.id == id);
    if(!record){
      state.add.push({
        id,
        num:1
      })
    }else{
      record.num++;
    }
  },
  //刪除單個(gè)物品
  deletShop(state,product){
    state.add.forEach((item,i)=>{
      if(item.id == product.id){
        state.add.splice(i,1)
      }
    })
  },
  //清空購(gòu)物車
  clearCart(state){
    state.add=[];
  }
}
export default{
  state,
  getters,
  actions,
  mutations
}

上述就是小編為大家分享的使用vuex如何實(shí)現(xiàn)一個(gè)購(gòu)物車功能了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁(yè)標(biāo)題：使用vuex如何實(shí)現(xiàn)一個(gè)購(gòu)物車功能-創(chuàng)新互聯(lián)
瀏覽地址：http://jinyejixie.com/article28/djeojp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、App開(kāi)發(fā)、外貿(mào)建站、網(wǎng)站內(nèi)鏈、App設(shè)計(jì)、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)