Question

在操作外部 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 文件中的循环。

我花了几天时间试图找到解决方案，但我不明白我可能做错了什么？

Vuex 状态未在 vue 文件中更新

0 个答案: