vue3 实现界面数据实时变化

diskings

已于 2022-08-23 15:20:06 修改

阅读量1.7k

点赞数

分类专栏： vue 文章标签： javascript 前端开发语言

于 2022-08-19 15:47:24 首次发布

本文链接：https://blog.csdn.net/play_841266670/article/details/126425978

版权

本文介绍如何在 Vue3 项目中结合 Pinia 和 WebSocket 实现界面数据的实时变化。通过创建pinia模块，编写websocket.js，并在main.js和App.vue中进行引用与初始化，实现前端界面与服务器数据的即时同步。

摘要由CSDN通过智能技术生成

技术支持：Vue3-ElementUI-WebSocket

库引用:pinia,websocket

1.创建pinia文件夹，目录如下

-src
  |- pinia
        |- index.js
        |- modules
            |- wsdata.js

2.编写pinia模块代码

// pinia/index.js

import { createPinia } from 'pinia'

const store = createPinia()

export {
  store
}



// pinia/modules/wsdata.js
import { defineStore } from 'pinia'


export const useWsdataStore = defineStore({
    // id: 必须的，在所有 Store 中唯一
    id: "wsdata",
    // state: 返回对象的函数
    state: () => ({
        asStateNormal: 1,
        asStateWarning: 1,
        orderPickError: 1,
        orderNewAccess: 1,
    }),
    getters: {},
    actions: {
      setasStateNormal(number) {
        this.asStateNormal = number;
      },
      setasStateWarning(number) {
        this.asStateWarning = number;
      },
      setorderPickError(number) {
        this.orderPickError