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