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

npm i 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')


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

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)
}