(vue3没有此问题)在Vuex中,如果store中数据是数组或者是对象,操作之后,vuex 数值已经改变了,但页面展示的对应数值却没有改变。
类似的情况,大部分出现在这几个场景
state: {
obj: {
arr: [0,1,2]
1. 改变数组的某一项
state.arr[0] = 1;
2. 对象赋值新属性
state.obj.b = 2;
3.修改数组长度时
state.arr.length = 1;
Vue2 Object.defineProperty的本身的机制问题,拓展深入响应式原理 — Vue.js
Vue.js是基于Object.defineProperty对对象实现“响应式化”,而对于数组,Vue.js提供的方法是重写push、pop、shift、unshift、splice、sort、reverse这七个数组方法。修改数组原型方法的代码可以参考observer/array.js以及observer/index.js。
参考Vue官网。
优先使用Vue.set,使用JSON.parse(JSON.stringify(state.obj)触发对象更新 或者 state.arr.push() 触发数组更新 也可以;
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
obj: {
arr: [0,1,2]
mutations: {
SET_STATE_DATA(state){
// state.obj.b= '233'; // 错误 页面不会更新
// JSON.parse(JSON.stringify(state.obj) //不推荐此方法触发更新 显得很LOWB
Vue.set(state.obj,'b','233') // 正确的方法
// state.arr[0] = 233; // 错误 页面不会更新
// state.arr.push() //不推荐此方法触发更新
Vue.set(state.arr,0,233) // 正确的方法
actions: {
在Vuex中,如果store中数据是数组或者是对象,操作之后,vuex 数值已经改变了,但页面展示的对应数值却没有改变。类似的情况,大部分出现在这几个场景state: { obj: { a:1, }, arr: [0,1,2]}1. 改变数组的某一项state.arr[0] = 1;2. 对象赋值新属性state.obj.b = 2;...解决方案优先使用Vue.set,使用JSON.p
首先,因为我有一个需求就是vue组件中有一组多选框,选中多选框的内容,要在另一个组件中进行视图更新,这个就设计的兄弟组件之间的通信了,兄弟组件之前通信我首先选用的vuex这个解决办法。
vuex的state用来放数据,我就把数组放在了vuex中,然后设置了修改的函数。最终store.js中的代码如下:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
messArray:[]
const mutations = {
modifyArray(state, obj){
最近项目有点忙碌,遇到好多
问题都没有总结(╥﹏╥),在开发过程
中,取
vuex中的
数组渲染完成之后,再次修改
数组的
值,数据
更新了,但是
视图并没有
更新。以为是
数组更新的
问题,后来又以为是因为
vuex导致的
问题. 最后强制刷新组件解决了
问题,但是还没有找到根本
问题的所在…
数组更新检测
在
vue 中使用
数组的push()、pop()、shift()、unshift()、splice()、sort()、reverse() 、filter()、concat() 方法时,
改变数组的同时可以触发
视图的变化。
注意: 有两种情况
vue 无法检测到变动的
数组,分别是:
(1)直接操作
数组的长度;
在vue项目中,有些我们会遇到修改完数据,但是视图却没有更新的情况。具体的场景不一样,解决问题的方法也不一样。在网上看了很多文章,在此总结汇总一下。针对,数据更新视图没有更新的情况,建议深入了解一下,vue的响应式原理。
②解决办法:
但是页面还是以前的值
由于 JavaScript 的限制,Vue 不能检测以下变动的数组:
当你利用索引直接设置一个项时,例如:vm.items[index] = newValue
handleEditorCallBack(obj, index) {
this.FormData.data.problemsAnswe
vue的$set属性
vue在进行初始化实例时进行数据双向绑定,使用Object.defineProperty()对属性遍历添加 getter/setter 方法,所以属性必须在 data 对象上存在时才能进行上述过程!
vue初始化实例后,再去给实例对象添加属性时并没有添加getter和setter的方法,所以改变属性值和添加属性值时只可以看到数据改变,页面数据并没有更新!这时用$set属性就可...
我实际用到的是这样的,我父组件引用子组件related,父组件调用获取
页面详情的方法,
更新了state
值related,子组件根据该related来渲染相关新闻内容,但是
页面打开的时候总是先加载子组件,子组件在渲染的时候还没有获取到
更新之后的related
值,即使在子组件
中watch该
值的变化依然不能渲染出来子组件的相关新闻内容。
我的解决办法:
父组件像子组件传
值,当父组件执行了获取
页面详情的方法之后,state
值related
更新,然后传给子组件,子组件再进行渲染,可以正常获取到。
父组件代码:
<template>
<div id=newsDetails>
Uncaught Error: [
vuex] Do not mutate
vuex store state outside mutation handlers
今天遇到一个
问题,将
Vuex中数组的
值赋给新的
数组,新
数组push时报上面的错误,代码如下
<code class=language-javascript>this.maPartListTable = this.$store.state.vehicleMa.maPartListTable;
</code>
this.maPartListTable.push(obj);
经询问后得知,应该这么写
this.maP
vuex改变了state的值,但是页面没有更新
当state里属性定义为obj类型时,有时候出现:在其他页面修改完state值之后,其他页面并没有同步更新。这时候需要转换一下。JSON.parse(JSON.stringify(obj))
this.$store.dispatch("setGlobalUserInformation",JSON.parse(JSON.stringify(obj)...
someAction(context) {
const someValue = context.state.someValue;
// do something with someValue
Failed to load module script: The server responded with a non-JavaScript MIME type of “text/html”.
11878