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>
how to watch vuex state update的更多相关文章
- vue 关于deep watch / computed 监听不到 vuex state 对象变化的的问题
简而言之,如果vuex state 中是一个对象 {},那么监听就会有问题.先给出解决方案: // 超简易拷贝(如果是深拷贝还多此一举把get/set拷贝进去了,所以用简易拷贝即可) let __VA ...
- vue自学入门-5(vuex state)
vue自学入门-1(Windows下搭建vue环境) vue自学入门-2(vue创建项目) vue自学入门-3(vue第一个例子) vue自学入门-4(vue slot) vue自学入门-5(vuex ...
- [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 ...
- weex里Vuex state使用storage持久化
在weex里使用Vuex作为state管理工具,问题来了,如何使得state可以持久化呢?weex官方提供store模块,因此我们可以尝试使用该模块来持久化state. 先看下该模块介绍: stora ...
- Vuex state 状态浅解
对于Vuex中的state里面的理解总是有些欠缺,机制似乎理解了.但是还有很多的不足,在这就先浅谈下自己的理解. vuex 机制中,定义了全局Store,在各个vue组件面的this.$store指向 ...
- vuex state使用
访问vuex中的state值 方式1 <div>{{$store.state.count}}</div> 方式2 <template> <div id=&qu ...
- 万恶的浏览器缓存 Vuex state里面的成员改名后浏览器不会马上更新
今天在用Vuex的时候,在state里面加了个名叫rootUrl的属性 但是怎么都取不到值,重新启动程序,ctrl+f5浏览器刷新都不行,纠结了大半上午,于是用console.log(store.ge ...
- Vue Vuex state mutations
Vuex 解决不同组件的数据共享,与数据持久化 1.npm install vuex --save 2.新建store.js 并引入vue vuex ,Vue.use(Vuex) 3.state在vu ...
- vue v-model 与 vuex state数据绑定问题
最近开发的项目 需要用input 的v-model 直接绑定到vuex的store数据 因为v-model 能与data的数据绑定 尝试了半天 代码如下 <template> <di ...
随机推荐
- WeCenter (最新版) 前台RCE漏洞 (2020-02-22)
漏洞通过phar触发反序列化漏洞. 触发点:./models/account.php 中的 associate_remote_avatar 方法: 搜索全局调用了该方法的地方: ./app/accou ...
- Spring MVC—模型数据,转发重定向,静态资源处理方式
Spring MVC处理模型数据 添加模型数据的方法 ModelAndView Map及Model SessionAttribute ModelAttribute Spring MVC转发和重定向 S ...
- CVE-2018-4407(IOS缓冲区溢出漏洞)exp
CVE-2018-4407为ios缓冲区溢出漏洞 exp: import scapyfrom scapy.all import * send(IP(dst="同一局域网内目标Ip" ...
- ubuntu14.04 ssh允许root用户远程登录
vi /etc/ssh/sshd_config #注释掉 #PermitRootLogin without-password # Authentication: LoginGraceTime 120 ...
- HDU6321 Dynamic Graph Matching【状压DP 子集枚举】
HDU6321 Dynamic Graph Matching 题意: 给出\(N\)个点,一开始没有边,然后有\(M\)次操作,每次操作加一条无向边或者删一条已经存在的边,问每次操作后图中恰好匹配\( ...
- 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 ...
- Codeforces Round #695 (Div. 2) C. Three Bags (贪心,思维)
题意:有三个背包,每个背包里都用一些数字,你可以选择某一个背包的数字\(a\),从另外一个背包拿出\(b\)(拿出之后就没有了),然后将\(a\)替换为\(a-b\),你可以进行任意次这样的操作,使得 ...
- Atcoder ABC161 A~E
传送门 A - ABC Swap 1 #include <iostream> 2 #include <cstdio> 3 #include <cstring> 4 ...
- CodeForces - 220B 离散化+莫队算法
莫队算法链接:传送门 题意: 有n个数,m个区间.问区间内有多少个x,x满足x的个数等于x的值的个数(如果x是3,区间内要存在3个3). 题解: 因为a[i]太大,所以要离散化一下,但是不能用map容 ...
- 牛客练习赛70 D.数树 (模拟,STL)
题意:每次有\(3\)中操作,对两个点连条边,删去某条边,或者问当前大小不为\(1\)的树的数量.连重边或者删去一条不存在的边,这样的白痴操作可以无视qwq. 题解:水题,用map存一下pair然后分 ...