vue3 uses vuex to implement real-time page update data instance tutorial (setup)

Preface

I use ws to get data in my project, because the data is constantly updated, and the vue page is updated only once and will not be updated. Then, for the time being, I can only think of vuex to save the update status, and the page listening data is updated in real time. The following is the data I used when testing, but it does not use WS, and uses a timer to simulate and send data in a timer.

1. Project introduction vue

npm i vuex

Introducing vuex

import { createApp } from 'vue'
import './'
import App from './'
//vuex
import store from './store/'
import * as echarts from 'echarts'
const app = createApp(App)
// Global mount echartscreateApp(App)..$echarts = echarts
createApp(App).use(store).mount('#app')

3. Create a new store folder

Write vuex

import { createStore } from 'vuex'

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

        getStateCount: function (state) {
            ('I want to get angry');
            return ;
        }
    },
    mutations: {
        addCount(state, payload) {
             += payload
        },
        setIOTData(state, data) {
             = data
            ('setIOTData method', );
        },
        updateIOTTagConfig(state, data) {
            //Focus, otherwise the page data will not be updated            =null
             = data
            (, 'Enter mutations');
        },
    },
    actions: {
        asyncAddStoreCount(store, payload) { // The first parameter is a fixed parameter of vuex and does not need to be passed manually            ("addCount", payload)
        },
        asyncupdateIOTTagConfig({ commit, state }, data) {
            commit('updateIOTTagConfig', data)
        },

    },
    modules: {

    }
})

export default store

3. Introduce vuex () on the page where the data is transmitted

(Note that I am using a timer here, and don’t care about so many methods to pass this array. You can also use vuex in one method, I wrote this in the test)

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++) {
            ({ 'id': (() * 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) {
       (...data)
    if ( > 20) {
         (0,17)
        // (s,exitArr,'pos');
    } 
    ('asyncupdateIOTTagConfig',exitArr)
}

4. Render the page

&lt;template&gt;
  {{name}} 
  &lt;!-- &lt;h1&gt;vuexData in{{  }}&lt;/h1&gt;
  &lt;button @click="changeStoreCount"&gt;Changevuexdata&lt;/button&gt;
  &lt;button @click="asyncChangeStoreCount"&gt;异步Changevuexdata&lt;/button&gt; --&gt;
  &lt;echarts&gt;&lt;/echarts&gt;
&lt;/template&gt;
&lt;script&gt;
import { defineComponent, computed,ref, watch, toRaw ,onUnmounted} from "vue";
import echarts from "./";
import { useStore } from "vuex";
import axios from "axios";
export default defineComponent({
  name: "HelloWorld",
  components:{echarts},
  setup() {
    let {state, commit,getters} = useStore();
    // Use the calculation attribute to dynamically get the value of vuex    let name = computed(() =&gt; {return })
    // let UserInfoNoParams = computed(() =&gt; getters['getStateCount'])
    (name,,'Why');
    // commit("setIOTData", 1);
    // const nextAge = computed({
    //    get() {
    //     return 
    //   },
    //   // set(value) {
    // // (value) // Output the newly modified value    //   //   return  = value - 1
    //   // }
    // })
    // Listen to data     watch(name, (newVal, oldVal) =&gt; {
      (name,"Change value", toRaw(newVal));
      ("old",oldVal);
    },{immediate:true,deep: true});
    // (nextAge,'nextAge');
    return {name};
    //   const changeStoreCount = () =&gt; {
    //     ("addCount", 1)
    //   }
    //   const asyncChangeStoreCount = () =&gt; {
    //     setTimeout(() =&gt; {
    // // asyncAddStoreCount is a method in mutations, and 2 is to pass the past data    // // Asynchronously change vuex using dispatch method, here use setTimeout to simulate asynchronous operation    //       ("asyncAddStoreCount", 2)
    //     }, 1000)
    //   }
    // return { store, changeStoreCount, asyncChangeStoreCount }
  },
});
&lt;/script&gt;
&lt;style scoped&gt;&lt;/style&gt;

The code may be a bit messy, but it can achieve the effect.

Summarize

This is the article about vue3 using vuex to implement real-time update data (setup) on pages. For more relevant vuex pages, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!