vue——pinia（版本的购物车）

列表中展示功能

        1.在main.ts中引入pinia

                

import { createApp } from 'vue'

import { createPinia } from 'pinia'

import piniaPluginPersist from 'pinia-plugin-persist'

import App from './App.vue'

import router from './router'

let store = createPinia();

const app = createApp(App)

store.use(piniaPluginPersist);

app.use(store)

app.use(router)

app.mount('#app')

        2.新建文件 stores/users.ts

                

import { defineStore } from 'pinia'

console.log(defineStore);

export const useStore = defineStore('users', {

  state: () => ({

    list: [

      {

        userid: 1,

        username: "Apple Macbook电脑",

        userpirce: 8840,

        usernum: 1,

        userimg: 'https://img.yzcdn.cn/vant/apple-1.jpg',

        select: false

      },

      {

        userid: 2,

        username: "华为电脑",

        userpirce: 7040,

        usernum: 1,

        userimg: 'https://img.yzcdn.cn/vant/apple-1.jpg',

        select: false

      }

    ],

    isAllselect: false

  }),

         3.在src/view/pina/pina.vue中渲染数据

        

<template>

   <div class="top">

        <div class="top_1">

            <p>

                //全选

            <input type="checkbox" @change="allselectChange" v-model="uStore.isAllselect">    全部</p>

            <p>商品</p>

            <p>单击</p>

            <p>数量</p>

            <p>小计</p>

            <p>操作</p>

        </div>

        <div class="top_2">

            <ul class="top_21" v-for="(item,index) in uStore.list" :key="index">

                //反选

                <li><input type="checkbox" @change="singChange" v-model="item.select"></li>

                <li><img :src="item.userimg" alt=""></li>

                <li>{{ item.username }}</li>

                <li>{{  item.userpirce}}</li>

                <li>

                    <button @click="updateNum(index,-1)">-</button>

                    {{ item.usernum }}

                    <button

                        @click="updateNum(index,1)"

                    >+</button>

                </li>

                <li>

                    <p><button @click="userDel(item.userid)">删除</button></p>

                </li>

            </ul>

        </div>

        <div class="top_3">

            <p>总计：{{ uStore.total }}</p>

            <button>结算</button>

        </div>

   </div>

</template>

4.在 src/view/pina/pina.vue中写需要传入users.ts文件的方法

const updateNum=(index:number,num:number)=>{

    uStore.updateNum(index,num)

}

const allselectChange=()=>{

    uStore.allselectChange()

}

const singChange=()=>{

    uStore.singChange()

}

const userDel=(id)=>{

    uStore.userDel(id)

}

     5.全选反选功能

        1.在getters中提供计算属性

 

 actions: {

    allselectChange() {

      this.list.forEach((item) => {

        item.select = this.isAllselect

      })

    },

    singChange() {

      this.isAllselect = this.list.every(item => item.select)

    },

    updateNum(index: number, usernum: number) {

      this.list[index].usernum = this.list[index].usernum || 1

      this.list[index].usernum += usernum

    },

}

         6.实现加减功能

actions: { 

        updateNum(index: number, usernum: number) {

              this.list[index].usernum = this.list[index].usernum || 1

              this.list[index].usernum += usernum

            },

        }

         7.实现删除功能

        actions: {

                 userDel(userid) {

                      this.list = this.list.filter(item => item.userid !== userid)

                   }

        }