亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

VueJS 反應性:用數據替換數組

VueJS 反應性:用數據替換數組

MM們 2022-12-22 13:13:09
我仍然無法理解為什么某些更改數據的方法有效,而其他方法卻無效。我試過這個例子:    watch: {      '$store.state.linedata': function() {this.redraw()}    },    methods: {      redraw() {        this.chartOptions.series[0].data = this.$store.state.linedata      }    },    data() {      return {        chartOptions: {          chart: {            type: this.type          },          series: [{            data: this.$store.state.linedata,            name: "Test Series",            color: this.color          }]        }      }  }此設置有效,每當我linedata在商店中更改時,組件都會更新。但是,對我來說,像這樣更新數據而不引用會更直觀this.chartOptions.series[0].data:  redraw() {    this.$store.state.linedata = [1,2,3,4,5,6]  }這將正確更新狀態,但不會導致使用新數據更新組件。為什么第二種方法不起作用,而我的第一種方法是正確的方法嗎?我覺得我在這里誤解了一些核心概念。最佳實踐是什么樣的?謝謝!
查看完整描述

1 回答

?
拉丁的傳說

TA貢獻1789條經驗 獲得超8個贊

從Vuex 文檔中,您可以閱讀:


在 Vuex store 中真正改變狀態的唯一方法是提交一個 mutation


這意味著你不應該嘗試做this.$store.state.linedata = [1,2,3,4,5,6]。順便說一句,它可能會拋出錯誤,具體取決于您在控制臺中的 Vuex 設置。相反,像這樣創建一個突變:


mutations: {

  updateLineDate(state, lineDate) {

    state.lineData = lineData;

  }

}

然后調用:


this.$store.commit("updateLineDate", [1, 2, 3, 4, 5, 6]);

要自動更新圖表數據,我建議在 Vue 組件中創建一個計算屬性。要使其對更改做出反應,請使用以下方法映射您的屬性mapState:


import { mapState } from "vuex";


// ...


computed: {

  ...mapState("lineData"),

  chartData() {

    return {

      chart: {

        type: this.type

      },

      series: [{

        data: this.lineData,

        name: "Test Series",

        color: this.color

      }]

    }

  }

}

然后記得提供chartData給您的圖表組件,而不是chartOptions在我的示例中。


查看完整回答
反對 回復 2022-12-22
  • 1 回答
  • 0 關注
  • 119 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號