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>

how to watch vuex state update的更多相关文章

  1. vue 关于deep watch / computed 监听不到 vuex state 对象变化的的问题

    简而言之,如果vuex state 中是一个对象 {},那么监听就会有问题.先给出解决方案: // 超简易拷贝(如果是深拷贝还多此一举把get/set拷贝进去了,所以用简易拷贝即可) let __VA ...

  2. vue自学入门-5(vuex state)

    vue自学入门-1(Windows下搭建vue环境) vue自学入门-2(vue创建项目) vue自学入门-3(vue第一个例子) vue自学入门-4(vue slot) vue自学入门-5(vuex ...

  3. [Nuxt] Update Vuex State with Mutations and MapMutations in Vue.js

    You commit changes to state in Vuex using defined mutations. You can easily access these state mutat ...

  4. weex里Vuex state使用storage持久化

    在weex里使用Vuex作为state管理工具,问题来了,如何使得state可以持久化呢?weex官方提供store模块,因此我们可以尝试使用该模块来持久化state. 先看下该模块介绍: stora ...

  5. Vuex state 状态浅解

    对于Vuex中的state里面的理解总是有些欠缺,机制似乎理解了.但是还有很多的不足,在这就先浅谈下自己的理解. vuex 机制中,定义了全局Store,在各个vue组件面的this.$store指向 ...

  6. vuex state使用

    访问vuex中的state值 方式1 <div>{{$store.state.count}}</div> 方式2 <template> <div id=&qu ...

  7. 万恶的浏览器缓存 Vuex state里面的成员改名后浏览器不会马上更新

    今天在用Vuex的时候,在state里面加了个名叫rootUrl的属性 但是怎么都取不到值,重新启动程序,ctrl+f5浏览器刷新都不行,纠结了大半上午,于是用console.log(store.ge ...

  8. Vue Vuex state mutations

    Vuex 解决不同组件的数据共享,与数据持久化 1.npm install vuex --save 2.新建store.js 并引入vue vuex ,Vue.use(Vuex) 3.state在vu ...

  9. vue v-model 与 vuex state数据绑定问题

    最近开发的项目 需要用input 的v-model 直接绑定到vuex的store数据 因为v-model 能与data的数据绑定 尝试了半天 代码如下 <template> <di ...

随机推荐

  1. WeCenter (最新版) 前台RCE漏洞 (2020-02-22)

    漏洞通过phar触发反序列化漏洞. 触发点:./models/account.php 中的 associate_remote_avatar 方法: 搜索全局调用了该方法的地方: ./app/accou ...

  2. Spring MVC—模型数据,转发重定向,静态资源处理方式

    Spring MVC处理模型数据 添加模型数据的方法 ModelAndView Map及Model SessionAttribute ModelAttribute Spring MVC转发和重定向 S ...

  3. CVE-2018-4407(IOS缓冲区溢出漏洞)exp

    CVE-2018-4407为ios缓冲区溢出漏洞 exp: import scapyfrom scapy.all import * send(IP(dst="同一局域网内目标Ip" ...

  4. ubuntu14.04 ssh允许root用户远程登录

    vi /etc/ssh/sshd_config #注释掉 #PermitRootLogin without-password # Authentication: LoginGraceTime 120 ...

  5. HDU6321 Dynamic Graph Matching【状压DP 子集枚举】

    HDU6321 Dynamic Graph Matching 题意: 给出\(N\)个点,一开始没有边,然后有\(M\)次操作,每次操作加一条无向边或者删一条已经存在的边,问每次操作后图中恰好匹配\( ...

  6. Codeforces Round #627 (Div. 3) D - Pair of Topics(双指针)

    题意: 有长为n的a,b两序列,问满足ai+aj>bi+bj(i<j)的i,j对数. 思路: 移项得:(ai-bi)+(aj-bj)>0,i<j即i!=j,用c序列保存所有ai ...

  7. Codeforces Round #695 (Div. 2) C. Three Bags (贪心,思维)

    题意:有三个背包,每个背包里都用一些数字,你可以选择某一个背包的数字\(a\),从另外一个背包拿出\(b\)(拿出之后就没有了),然后将\(a\)替换为\(a-b\),你可以进行任意次这样的操作,使得 ...

  8. Atcoder ABC161 A~E

    传送门 A - ABC Swap 1 #include <iostream> 2 #include <cstdio> 3 #include <cstring> 4 ...

  9. CodeForces - 220B 离散化+莫队算法

    莫队算法链接:传送门 题意: 有n个数,m个区间.问区间内有多少个x,x满足x的个数等于x的值的个数(如果x是3,区间内要存在3个3). 题解: 因为a[i]太大,所以要离散化一下,但是不能用map容 ...

  10. 牛客练习赛70 D.数树 (模拟,STL)

    题意:每次有\(3\)中操作,对两个点连条边,删去某条边,或者问当前大小不为\(1\)的树的数量.连重边或者删去一条不存在的边,这样的白痴操作可以无视qwq. 题解:水题,用map存一下pair然后分 ...