vuex deep属性使用 监听对象数组改变

vuex数据格式：（数据来源echart官网）

opcitions: {
  xAxis: {
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        name: '数值',
      },
      series: [{
        type: 'bar',
        barWidth: 50, // 柱图宽度
        barMaxWidth: 50, // 最大宽度
        label: {
          show: true,
          position: 'top'
        },
      data: [10, 52, 200, 334, 390, 330, 220]
      }]
      //....
}

组件a：负责监听vuex数据变化，数据一变化执行相应函数（改变echart）

  computed: {
    ...mapState(
      {
        opcitions: state => state.forecast.opcitions
      }
    ),
  },
 //监听vuex一部分数据变化  handler默认方法
  watch: { 
    opcitions: {
      handler () {
        this.getEchartData()
      },
      deep: true
    }
  },

在组件b：一些列操作后，更改vuex数据*

  inspectFunc () {
      let arr = [1, 3, 4, 5] //模拟操作后改变的数据
      this.$set(this.$store.state.forecast.opcitions.xAxis, "data", arr)
    }

这样一来就可以监听到vuex中的深层数据的改变啦！

奥利给！！! * 3