首页 前端知识 vue3使用vuex实现页面实时更新数据(setup)

vue3使用vuex实现页面实时更新数据(setup)

2024-04-07 08:04:35 前端知识 前端哥 426 102 我要收藏

我项目中使用ws获取数据,因为数据是不断更新的,vue页面只更新一次就不更新了,然后暂时只能想到vuex来保存更新状态,页面监听数据实现实时更新。下面是我测试时用的数据,没有用ws,用的是定时器模拟定时发送数据。
1.项目引入vue

npm i vuex

2.main.js引入vuex

import {
    createApp } from 'vue'
import './style.css'
import App from './App.vue'
//vuex
import store from './store/index.js'
import * as echarts from 'echarts'
const app = createApp(App)
// 全局挂载echarts
createApp(App).config.globalProperties.$echarts = echarts
createApp(App).use(store).mount('#app')

3.新建store文件夹
index.js里写vuex

import {
    createStore } from 'vuex'

const store = createStore({
   
    state: {
   
        iotData: {
   },
        count: 0,
    },
    getters: {
   

        getStateCount: function (state) {
   
            console.log('想发火啊');
            return state.iotData;
        }
    },
    mutations: {
   
        addCount(state, payload) {
   
            state.count 
转载请注明出处或者链接地址:https://www.qianduange.cn//article/4550.html
标签
评论
发布的文章

PostgreSQL 操作json/jsonb

2024-04-20 17:04:16

Excel转json的两种办法

2024-04-20 17:04:09

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!