解决vuex改变了state的值,但是页面没有更新的问题


Posted in Javascript onNovember 12, 2020

当state里属性定义为obj类型时,有时候出现:在其他页面修改完state值之后,其他页面并没有同步更新。

这时候需要转换一下。JSON.parse(JSON.stringify(obj))

this.$store.dispatch("setGlobalUserInformation",JSON.parse(JSON.stringify(obj)))

补充知识:一个“错误”的vuex写法:vuex刷新了数据但是视图没有刷新

这是个很尴尬的问题,让我猜猜看你的代码是不是这样写的:

<template>
 <div id="app">
 <img src="./assets/logo.png">
 <button @click="clickme">点击我</button>
 <span>{{countnumber}}</span>
 </div>
</template>
<script>
 export default {
 name: 'app',
 data() {
  return {
  countnumber: this.$store.state.count,
  }
 },
 methods: {
  clickme: function() {
  this.$store.commit("increment");
  }
 },
 }
</script>
<style>
 
</style>

那么恭喜你,无论你怎么平明点,都会是0.但是如果你是下面这种写法,那就是正确的了:

<template>
 <div id="app">
 <img src="./assets/logo.png">
 <button @click="clickme">点击我</button>
 <span>{{$store.state.count}}</span>
 </div>
</template>
<script>
 export default {
 name: 'app',
 data() {
 },
 methods: {
  clickme: function() {
  this.$store.commit("increment");
  }
 },
 }
</script>
<style>
 
</style>

区别就是你直接关联到界面里面。为什么这样?不清楚,毕竟是别人的框架。

以上这篇解决vuex改变了state的值,但是页面没有更新的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript权威指南 学习笔记之javascript数据类型
Sep 24 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 Javascript
Javascript仿PHP $_GET获取URL中的参数
May 12 Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
Sep 29 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
微信小程序中的onLoad详解及简单实例
Apr 05 Javascript
微信小程序开发之实现自定义Toast弹框
Jun 08 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 Javascript
zepto.js 实时监听输入框的方法
Dec 04 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
Jun 03 Javascript
javascript实现搜索筛选功能实例代码
Nov 12 #Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 #Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 #Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 #Javascript
详解ES6 扩展运算符的使用与注意事项
Nov 12 #Javascript
在vue中使用image-webpack-loader实例
Nov 12 #Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 #Javascript
You might like
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
PHP图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
浅谈laravel-admin的sortable和orderby使用问题
2019/10/03 PHP
ExtJS 2.0 GridPanel基本表格简明教程
2010/05/25 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
微信小程序 数据访问实例详解
2016/10/08 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
2016/12/16 Javascript
javascript 单例模式详解及简单实例
2017/02/14 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
2018/08/13 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
python写的ARP攻击代码实例
2014/06/04 Python
Python fileinput模块使用实例
2015/06/03 Python
Python聚类算法之DBSACN实例分析
2015/11/20 Python
python 实现红包随机生成算法的简单实例
2017/01/04 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
pandas apply多线程实现代码
2020/08/17 Python
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
学校运动会霸气口号
2014/06/07 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
学生通报表扬范文
2015/05/04 职场文书
政工师工作总结2015
2015/05/26 职场文书