账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    关于在script中使用vuex的state数据的问题
    23
    0
    需求描述:1.使用vuex获取后台数据并存储在state中2.通过mapState,获取到state中的值3.调用echarts setOption()进行重新绘制问题:读取到的state可以在template中通过{{scatterData}}显示,而不能在echarts的配置option中识别。代码:store:main.jsexport default { namespaced: true, state: { lineData1: [], //折现图数据源1 lineData2: [], //折线图数据源2 scatterData: [], //散点图数据源 gkmszs: 0, //工况模式指数 yjsj: 0, //预警指数 wdzs: 0, //稳定指数 tableData: [], //表格数据 }, mutations: { set_scatterData(state, data) { state.scatterData = data; }, }, actions: { scatterHis(context, params) { let n = params.n let numMax if (params.time[1] === params.time[0]) { numMax = 1 } else { numMax = (params.time[1] - params.time[0]) / 1000 / n } //计算该段时间的点数,n为取样频率单位n/s axios({ method: "POST", url: "/api/DbComm/GetHisData", data: { tags: ["data\\tag1", "data\\tag2"], stime: params.time[0], etime: params.time[1], count: numMax, }, }).then((res) => { context.commit("set_scatterData", res); }); },store:index.jsimport Vue from 'vue';import Vuex from 'vuex'import main from './main';Vue.use(Vuex)export default new Vuex.Store({ state: { }, mutations: { }, actions: { }, modules: { main, }})入口文件:main.jsimport Vue from 'vue'import App from './App.vue'import './assets/style/reset.css' //清除默认样式import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import './assets/style/main.css';import store from './store/index'Vue.config.productionTip = falseVue.use(ElementUI);new Vue({ store, render: h => h(App),}).$mount('#app')读取scatterDatacomputed: { ...mapState("main", ["scatterData"]), },echarts的option var option = { xAxis: { min: 0, max: 100, show: false, }, yAxis: { min: 0, max: 100, show: false, }, series: [ { symbolSize: this.size, data: ??????????, type: "scatter", itemStyle: { normal: { color: function(params) { let colorList = that.color; if ( params.dataIndex > that.dataArr.length - colorList.length ) { return colorList[that.dataArr.length - params.dataIndex]; } return colorList[0]; }, }, }, }, ], }; myChart.setOption(option, true);怎样将scatterData赋值给option的series下的data
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 锁顁婞福 普通会员 1楼

      在Vue.js中,使用 Vuex 可以管理应用程序的状态。Vuex 的 state 是一个状态对象,它保存了应用程序中的状态信息。要使用 Vuex 的 state 数据,请按照以下步骤操作:

      1. 在你的 Vue 组件中引入 Vuex。 javascript import Vue from 'vue'; import Vuex from 'vuex';

      2. 初始化 Vuex。 javascript new Vuex.Store({ state: { count: 0 } });

      3. 使用 Vuex 的 getters 来获取 state 的值。 javascript export default { getters: { count(state) { return state.count; } } };

      4. 使用 Vuex 的 mutations 来改变 state 的值。 javascript export default { mutations: { increment(state) { state.count++; } } };

      5. 使用 Vuex 的 actions 来改变 state 的值。 javascript export default { actions: { increment(state) { state.count++; } } };

      6. 使用 Vuex 的 getters 来获取 state 的值。 javascript export default { getters: { count(state) { return state.count; } } };

      7. 使用 Vuex 的 mutations 来改变 state 的值。 javascript export default { mutations: { increment(state) { state.count++; } } };

      8. 使用 Vuex 的 actions 来改变 state 的值。 javascript export default { actions: { increment(state) { state.count++; } } };

      以上就是在 Vue.js 中使用 Vuex 的 state 数据的基本步骤。您可以根据自己的需求,灵活地使用 Vuex 来管理应用程序的状态。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部