javascript - Vuex 状态未在 vue 文件中更新
问题描述
在外部 JS 文件中操作存储状态后,我正在使用带有状态的 Vuex 存储来更新图表(这是一个 vue 组件)。问题是当外部 JS 文件调用 mutate 函数(我已经使用它检查过console.log
)时,状态填充了数据,但是当我使用按钮用状态数据更新图表时,它显示默认状态数据,它在store.js
文件中
该store.js
文件具有以下代码:
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
mercuryData: {
type: "line",
data: {
labels: [12,313,4,2],
datasets: [
{
label: "Number of Messages",
data: [],
backgroundColor: "rgba(54,73,93,.5)",
borderColor: "#36495d",
borderWidth: 3
},
]
},
options: {
responsive: true,
lineTension: 1,
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
padding: 25
}
}
]
}
}
}
},
getters: {},
mutations: {
addData (state, payload) {
console.log("THIS IS A TEST ")
console.log("DO NOT ")
console.log(state, payload)
console.log("00x0x0x0x0x00x0x0x02")
state.mercuryData.data.datasets[0].data.push(0);
state.mercuryData.data.labels.push(payload)
}
},
actions: {}
});
我正在使用外部 JS 文件中的循环更新数据:
import store from '../store/store'
...
...
...
store.commit("addData", 999)
...
我的带有图表组件的 vue 文件:
<template>
<div>
<canvas id="planet-chart"></canvas>
<v-btn color="info" v-on:click="updateData()">Show simulation</v-btn>
</div>
</template>
<script>
...
...
mounted() {
const ctx = document.getElementById('planet-chart');
myChart = new Chart(ctx, this.$store.state.mercuryData);
...
...
methods : {
updateData() {
myChart.update()
// planetChartData.data.labels.push(25);
// planetChartData.data.datasets[0].data.push(24);
console.log(myChart.data)
console.log(this.$store.state.mercuryData);
...
...
我还使用一个按钮对其进行了测试,该按钮手动更新图表并在存储中添加数据(目前已注释),数据附加了默认存储状态值,而不是通过循环运行的数据外部 JS 文件。
我花了几天时间试图找到解决方案,但我不明白我可能做错了什么?
解决方案
推荐阅读
- node.js - 特快专递不发布未定义 req.body 的数据
- scheduling - 具有作业执行时间、截止日期和处罚的作业排序
- javascript - TS2322 & TS2495 - 具有 ES6 和 ES5 目标的迭代器
- javascript - Webworker 与节点环境
- linux - 如何以非 root 用户身份运行 docker 容器以及如何将 docker 镜像分享给其他人?
- python - 使用带有预定义中心的 K-Means?
- php - 让本地机器上的python程序知道服务器何时更改了服务器上的文件
- java - 有没有办法在java中将变量转换为常量?
- bootstrap-4 - Bootstrap 4 carousel-control-color 条件颜色 - SVG
- reactjs - 使用 react-navigation v2 进行导航