vue3使用vuex實現(xiàn)頁面實時更新數(shù)據(jù)實例教程(setup)
前言
我項目中使用ws獲取數(shù)據(jù),因為數(shù)據(jù)是不斷更新的,vue頁面只更新一次就不更新了,然后暫時只能想到vuex來保存更新狀態(tài),頁面監(jiān)聽數(shù)據(jù)實現(xiàn)實時更新。下面是我測試時用的數(shù)據(jù),沒有用ws,用的是定時器模擬定時發(fā)送數(shù)據(jù)。
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('想發(fā)火啊'); return state.iotData; } }, mutations: { addCount(state, payload) { state.count += payload }, setIOTData(state, data) { state.iotData = data console.log('setIOTData方法', state.iotData); }, updateIOTTagConfig(state, data) { //重點,要不然頁面數(shù)據(jù)不更新 state.iotData=null state.iotData = data console.log(state.iotData, '進入mutations'); }, }, actions: { asyncAddStoreCount(store, payload) { // 第一個參數(shù)是vuex固定的參數(shù),不需要手動去傳遞 store.commit("addCount", payload) }, asyncupdateIOTTagConfig({ commit, state }, data) { commit('updateIOTTagConfig', data) }, }, modules: { } }) export default store
3.在傳輸數(shù)據(jù)的頁面引入vuex (api.js)
(注意,這里我用的是定時器,另外不要在意這么多方法傳這個數(shù)組,你也可以就一個方法里使用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.渲染頁面
<template> {{name}} <!-- <h1>vuex中的數(shù)據(jù){{ store.state.count }}</h1> <button @click="changeStoreCount">改變vuex數(shù)據(jù)</button> <button @click="asyncChangeStoreCount">異步改變vuex數(shù)據(jù)</button> --> <echarts></echarts> </template> <script> import { defineComponent, computed,ref, watch, toRaw ,onUnmounted} from "vue"; import echarts from "./echarts.vue"; import { useStore } from "vuex"; import axios from "axios"; export default defineComponent({ name: "HelloWorld", components:{echarts}, setup() { let {state, commit,getters} = useStore(); //使用計算屬性動態(tài)拿到vuex的值 let name = computed(() => {return state.iotData}) // let UserInfoNoParams = computed(() => getters['getStateCount']) console.log(name,state.iotData,'哎'); // commit("setIOTData", 1); // const nextAge = computed({ // get() { // return store.iotData // }, // // set(value) { // // console.log(value) // 輸出新修改的值 // // return age.value = value - 1 // // } // }) //監(jiān)聽數(shù)據(jù) watch(name, (newVal, oldVal) => { console.log(name,"改變的值", toRaw(newVal)); console.log("舊",oldVal); },{immediate:true,deep: true}); // console.log(nextAge,'nextAge'); return {name}; // const changeStoreCount = () => { // store.commit("addCount", 1) // } // const asyncChangeStoreCount = () => { // setTimeout(() => { // // asyncAddStoreCount是mutations中的方法,2是傳遞過去的數(shù)據(jù) // // 異步改變vuex用dispatch方法,這里用setTimeout模擬異步操作 // store.dispatch("asyncAddStoreCount", 2) // }, 1000) // } // return { store, changeStoreCount, asyncChangeStoreCount } }, }); </script> <style scoped></style>
代碼可能有點亂,不過能實現(xiàn)效果。
總結(jié)
到此這篇關(guān)于vue3使用vuex實現(xiàn)頁面實時更新數(shù)據(jù)(setup)的文章就介紹到這了,更多相關(guān)vuex頁面實時更新數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
部屬vue項目,訪問路徑設(shè)置非根,顯示白屏的解決方案
這篇文章主要介紹了部屬vue項目,訪問路徑設(shè)置非根,顯示白屏的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04vue組件 $children,$refs,$parent的使用詳解
本篇文章主要介紹了vue組件 $children,$refs,$parent的使用詳解,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07vue-loader和webpack項目配置及npm錯誤問題的解決
這篇文章主要介紹了vue-loader和webpack項目配置及npm錯誤問題的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07