解决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 事件的一些重要说明
Oct 25 Javascript
jQuery中scrollLeft()方法用法实例
Jan 16 Javascript
javascript基于DOM实现权限选择实例分析
May 14 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
深入理解ES6中let和闭包
Feb 22 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
JS原型和原型链原理与用法实例详解
Feb 05 Javascript
浅析Vue 中的 render 函数
Feb 28 Javascript
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
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
PHP脚本的10个技巧(8)
2006/10/09 PHP
php4的session功能评述(一)
2006/10/09 PHP
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
分享php分页的功能模块
2015/06/16 PHP
详解PHP神奇又有用的Trait
2019/03/25 PHP
通过javascript设置css属性的代码
2009/12/28 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
Angular1.x自定义指令实例详解
2017/03/01 Javascript
让你彻底掌握es6 Promise的八段代码
2017/07/26 Javascript
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
JS实现checkbox互斥(单选)功能示例
2019/05/04 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
2019/05/12 Javascript
Async/Await替代Promise的6个理由
2019/06/15 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
nodejs对mongodb数据库的增加修删该查实例代码
2020/01/05 NodeJs
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
一些常用的Python爬虫技巧汇总
2016/09/28 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
Python3 读、写Excel文件的操作方法
2018/10/20 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
Python re正则表达式元字符分组()用法分享
2020/02/10 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
大学生职业生涯设计书
2014/01/02 职场文书
区优秀教师事迹材料
2014/02/10 职场文书
学校三节实施方案
2014/06/09 职场文书
初二学生评语大全
2014/12/26 职场文书
2015年民兵整组工作总结
2015/07/24 职场文书
Python基础之变量的相关知识总结
2021/06/23 Python