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>
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/12410270.html
未经授权禁止转载,违者必究!