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

目录

• 前言
• 1.项目引入vue
• 2.main.js引入vuex
• 3.新建store文件夹
• 3.在传输数据的页面引入vuex (api.js)
• 4.渲染页面
• 总结

前言

我项目中使用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 += payload
        },
        setIOTData(state, data) {
            state.iotData = data
            console.log('setIOTData方法', state.iotData);
        },
        updateIOTTagConfig(state, data) {
            //重点，要不然页面数据不更新
            state.iotData=null
            state.iotData = data
            console.log(state.iotData, '进入mutations');
        },
    },
    actions: {
        asyncAddStoreCount(store, payload) { // 第一个参数是vuex固定的参数，不需要手动去传递
            store.commit("addCount", payload)
        },
        asyncupdateIOTTagConfig({ commit, state }, data) {
            commit('updateIOTTagConfig', data)
        },

    },
    modules: {

    }
})

export default store

3.在传输数据的页面引入vuex (api.js)

(注意，这里我用的是定时器，另外不要在意这么多方法传这个数组，你也可以就一个方法里使用vuex，我这个就是测试写的）

let timer
import  store  from "../store/index";
export function myStopEcharts() {
    clearTimeout(timer)
}
export function startEcharts() {
 
    timer = setInterval(() => {
        var ydata1 = []
        for (let i = 0; i < 1; i++) {
            ydata1.push({ 'id': Math.round(Math.random() * 20), 'serialNumber': 2001, 'time': 2022 })
        }
        jj(ydata1)
       
    }, 2000)
}
 function jj(ydata1) {
    const messageList = ydata1
    hh(messageList)
}
function hh(messageList) {
    runExit(messageList)

}
function runExit(message) {
    exit(message)
}
 var exitArr = []
function exit(data) {
       exitArr.push(...data)
    if (exitArr.length > 20) {
         exitArr.splice(0,17)
        // console.log(s,exitArr,'pos');
    } 
    store.dispatch('asyncupdateIOTTagConfig',exitArr)
}

4.渲染页面

代码可能有点乱，不过能实现效果。

总结

到此这篇关于vue3使用vuex实现页面实时更新数据(setup)的文章就介绍到这了,更多相关vuex页面实时更新数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！