how to watch vuex state update

how to watch vuex state update

watch

https://vuex.vuejs.org/api/#watch

https://vuex.vuejs.org/guide/plugins.html

demo

this.$store.watch

this.$store.subscribe

https://dev.to/viniciuskneves/watch-for-vuex-state-changes-2mgj

...mapGetters

https://stackoverflow.com/questions/43270159/vue-js-2-how-to-watch-store-values-from-vuex

---

vuex watch demo

<template>
  <el-select
    v-model="ticketArea"
    @change="selectChange"
    class="live-area-select-box"
    size="small"
    placeholder="请选择票的选区">
    <el-option
      v-for="item in ticketAreas"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>

import axios from 'axios';

import {
  createNamespacedHelpers,
} from 'vuex';

const {
  mapState,
  mapActions,
  mapMutations,
  mapGetters,
} = createNamespacedHelpers('seatSelect');

const log = console.log;

export default {
  name: 'AreaSelect',
  props: {
    ticketAreas: {
      type: Array,
      required: true,
      default: () => [],
    },
  },
  components: {},
  data() {
    return {
      ticketArea: "",
    };
  },
  watch: {
    ticketAreas: function(newValue, oldValue) {
      log(`\n\n\nticketAreas`, newValue);
      if(newValue) {
        this.updateTicketAreas(newValue || []);
      }
    },
  },
  computed: {
    ...mapState({
      svgAreaSelected: state => state.svgAreaSelected,
      storeSeatMap: state => state.seatMap,
      storeSeatData: state => state.seatData,
      isSVGEmpty: state => state.isSVGEmpty,
    }),
    // localComputed () { /* ... */ },
    geoJSON () {
      return JSON.stringify(this.$store.getters.geoJSON, null, 2)
    },
    ...mapGetters([
      // 'getSeatMap',
      'getSVGEmpty',
    ]),
  },
  methods: {
    ...mapActions([
      'saveGeoJSON',
      'setTicketAreas',
    ]),
    // ...mapActions({
    //   getSeatMap: 'getGeoJSON',// rename
    //   saveSeatMap: 'saveGeoJSON',// rename
    // }),
    updateTicketAreas(value){
      this.ticketAreas = value || [];
    },
    selectChange(value){
      log(`select 页面`, this.ticketAreas, value);
    },
  },
  mounted() {
    log(`ticketAreas  xxxxx`, this.ticketAreas)
  },
}
</script>

<style lang="less">
  .live-area-select-box{
    box-sizing: border-box;
    width: 100%;
    min-width: 100px;
    margin-bottom: 10px;
  }
</style>

---