启动项目命

 yarn vite

使用 yarn dev --host命令这样就可以生成一个外网访问链接了

yarn dev --host

手机和网站必须和电脑在同一个IP段，然后手机输入这个IP就可以访问

import { ref, computed } from "vue";
import { defineStore } from "pinia";

export const Info = defineStore("Info", () => {
  // 店铺信息
  let shopInfo = ref<any>({});
  let changeInfo = (val: any) => {
    shopInfo.value = val;
  };
  // 商品
  let goods = ref<any>([]);
  let GoodsChange = (val: any) => {
    goods.value = val;
  };
  // 商品数量增加减少
  let addNum = (val: any, num: any) => {
    for (let obj of goods.value) {
      for (let arr of obj.foods) {
        if (arr.id === val.id) {
          arr.num += num;
        }
      }
    }
  };
  // 清空购物车
  let clearCart = () => {
    for (let obj of goods.value) {
      for (let child of obj.foods) {
        child.num = 0;
      }
    }
  };
  // 计算商品大于0
  let shopPing = computed(() => {
    let newArr = [];
    for (let obj of goods.value) {
      for (let arr of obj.foods) {
        if (arr.num > 0) {
          newArr.push(arr);
        }
      }
    }
    return newArr;
  });
  // 商品详情
  let goodsInfo = ref<any>({});
  let changeGoods = (val: any) => {
    goodsInfo.value = val;
  };
  return {
    shopInfo,
    changeInfo,
    goodsInfo,
    changeGoods,
    goods,
    GoodsChange,
    addNum,
    shopPing,
    clearCart,
  };
});

let leftScroll: any; //左边滚动
let rightScroll: any; // 右边滚动
// 点击事件  点击左边右边滚动到指定位置
let changeNumber = (index: any) => {
    rightScroll.scrollToElement('#key' + index, 1500)
}
// 实现左右联动

// 计算属性 计算右边盒子高度 并且对数组进行计算返回一个数组对象
let heightArr = computed(() => {
    let harr = ref<any>([])
    store.goods.forEach((obj: any, i: any) => {
        harr.value.push(document.getElementById(i)?.offsetHeight)
    })
    let newArr = ref<any>([])
    let totalHeight = ref(0)
    harr.value.forEach((arr: any, n: any) => {
        newArr.value.push({ min: totalHeight.value, max: totalHeight.value + arr, index: n })
        totalHeight.value += arr
    })
    return newArr.value
})
//初始化
onMounted(() => {
    leftScroll = new BScroll('.list_left', { click: true, probeType: 3 });
    rightScroll = new BScroll('.list_right', { click: true, probeType: 3 });
    //右边滚动事件
    rightScroll.on('scroll', (pos: any) => {
        let _y = Math.floor(Math.abs(pos.y))

        // 循环高度数组 进行判断使其在某一个区间联动左边滚动
        for (let obj of heightArr.value) {
            if (_y >= obj.min && _y <= obj.max) {
                active.value = obj.index
                leftScroll.scrollToElement('#left' + obj.index, 500)
            }
        }
    })
})

创建

引入

import { defineStore } from 'pinia'

定义，把变量变量暴露出去

export const useShopInfoStore = defineStore('shop', () => {
  let shopInfo = ref()
  let exInfo = (val: any) => {
    shopInfo.value = val
  }
  return {shopInfo,exInfo}
})

使用

引入

import { useShopInfoStore } from '../stores/counter'
let Shopstore = useShopInfoStore()

使用

Shopstore.shopInfo

如果需要结构要使用storeToRefs()来保持数据的响应式

引入storeToRefs

import { storeToRefs } from 'pinia'
let { shopInfo } = storeToRefs(Shopstore)

这样就可以不需要Shopstore.shopInfo拿到里面的值，而是直接shopInfo就可以拿到里面的值

方法的使用，直接Shopstore.exInfo(val) 传进去一个形惨，pinia里面会接受，并且根据逻辑进行处理。

创建页面也可以正常访问，但是ts报错找不不到模块，可以尝试使用下面方法解决

1.在根目录下面创建 shims-vue.d.ts ,放入下面代码，如果第二和代码段不行，可以尝试第一个。

// declare module '*.vue' {
//     import type { DefineComponent } from 'vue'
//     const component: DefineComponent<{}, {}, any>
//     export default component
// }

declare module '*.vue' {
    import type { DefineComponent } from 'vue'
    const component: ComponentOptions | ComponentOptions['setup']
    export default component
}

echarts默认配置项会数据叠加统计 stack: 'Total',删掉 stack配置项即可

new Date(传入时间).toLocaleString();

1.创建WS对象,与服务器建立webscoket链接

let ws: WebSocket
ws = new WebSocket('ws接口地址')

2.监听ws对象是否建立链接成功

ws.onopen = () => {
    //只要成功,就会触发此回调
}

3.主动推送一个消息给服务器

ws.send( "内容" )

4.监听服务器推送的消息

ws.onmessage = (e) => {
 console.log(e); 
}

5.前端主动断开链接

ws.close()