Vuex给state中的对象新添加属性遇到的问题及解决

目录
  • Vuex给state中的对象新添加属性遇到的坑
  • 向vuex对象中增加新的属性需要注意
  • 总结

Vuex给state中的对象新添加属性遇到的坑

state.js中有一个空对象obj：

export default {
  ...
  obj: {}
}

在App.vue中点击“给空对象增加属性”按钮，触发事件addObjAttr：

<template>
  <div id="app">
    ...
    <button @click="addObjAttr">给空对象增加属性</button>
  </div>
</template>
<script>
export default {
  name: 'App',
  ...
  methods: {
    ...
    addObjAttr() {
      this.$store.dispatch('addObjAttr', {name: 'zs'});
    }
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

this.$store.dispatch调度actions中的addObjAttr方法，并通过commit提交到mutations中的方法addObjAttr：

actions.js：

export default {
  ...
 
  addObjAttr({ commit }, payload) {
    commit('addObjAttr', payload.name);
  }
}

mutations.js 通过Vue.set响应视图：

import Vue from 'vue'
export default {
  ...
  addObjAttr(state, name) {
    // 视图无法响应
    // state.obj['name'] = name;
    // console.log(state.obj);
 
    // Vue.set向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')
    console.log(name);
    Vue.set(state.obj, 'name', name);
  }
}

页面效果：

向vuex对象中增加新的属性需要注意

今天开发一个项目，需求会去删除和新增vuex中的state值，但是用obj.prop这种方法给state中的obj添加不了prop

我想要添加一个属性值为provinceSoicalImg，从打印的对象中看到时存在这个属性的，但是

他没有get和set属性，导致我把这个data复制给

我的vuex的时候，这个属性就消失了

后来仔细想了下，之前遇到过vue修改data是对象的视图，如果直接修改是不行的，然后又百度了下为什么没有get和set方法，

稍加理解我猜测，vue的双向绑定基于的是object.defineProperty数据劫持，会把属性转换为getter/setter，vuex也是基于双向绑定的，所以普通的点或者中括号去新增一个属性是不行的，需要用到vue的set的方法

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

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

    当state里属性定义为obj类型时,有时候出现:在其他页面修改完state值之后,其他页面并没有同步更新. 这时候需要转换一下.JSON.parse(JSON.stringify(obj)) this.$store.dispatch("setGlobalUserInformation",JSON.parse(JSON.stringify(obj))) 补充知识:一个"错误"的vuex写法:vuex刷新了数据但是视图没有刷新 这是个很尴尬的问题,让我猜猜看你的代码是

  • Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解

    Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解

    更改 Vuex 的 store 中的状态的唯一方法是提交 mutation. Vuex 中的 mutation 非常类似于事件: 每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler).这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数.mutation 必须是同步函数. 不带载荷(只改变数据的状态) 接前面几篇文章的例子,这里我们修改商品价格减半. store.js mutations: { //商品价格减半:

  • Vuex之理解state的用法实例

    1.什么是state? 上一篇文章说了,Vuex就是提供一个仓库,仓库里面放了很多对象.其中state就是数据源存放地,对应于与一般Vue对象里面的data(后面讲到的actions和mutations对应于methods). 响应书存储:state里面存放的数据是响应式的,Vue组件从store中读取数据,若是store中的数据发生改变,依赖这个数据的组件也会发生更新.(这里"状态"="数据"),也就是是说数据和视图是同步的. 2.局部状态 获取:在Vue组件中获

  • Vuex给state中的对象新添加属性遇到的问题及解决

    目录 Vuex给state中的对象新添加属性遇到的坑 向vuex对象中增加新的属性需要注意 总结 Vuex给state中的对象新添加属性遇到的坑 state.js中有一个空对象obj: export default {   ...   obj: {} } 在App.vue中点击“给空对象增加属性”按钮,触发事件addObjAttr: <template>   <div id="app">     ...     <button @click="a

  • JS实现给对象动态添加属性的方法

    本文实例讲述了JS实现给对象动态添加属性的方法.分享给大家供大家参考,具体如下: 在工作用要用到给jd对象动态添加属性的要求,在网上找到了一种解决方式,实例如下: 1.demo var aa="maker"; var bb=123; var lists={}; eval("lists."+aa+"="+bb); eval('('+"lists."+aa+"="+bb+')'); console.log(li

  • vue给对象动态添加属性和值的实例

    一.背景 介绍:在vue中请求接口中,一个请求方法可能对应后台两个请求接口,所以请求参数就会有所不同.需要我们先设置共同的参数,然后根据条件动态添加参数属性. 二.案例 let that = this; let params = { "type":that.addQueTable.type, "discussTitle":that.addQueTable.discussTitle, }; // 区分普通题库还是模考题库 let addQuestionApi = ''

  • js基础之DOM中document对象的常用属性方法详解

    -----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.anchors  返回对文档中所有 Anchor 对象的引用.还有document.links/document.forms/document.images等 2  document.URL       返回当前文档的url 3  document.title       返回当前文档的标题 4  do

  • Three.js中网格对象MESH的属性与方法详解

    Three.js中网格对象MESH的属性与方法详解

    前言 本文主要给大家介绍了关于Three.js网格对象MESH的属性与方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 创建一个网格需要一个几何体,以及一个或多个材质.当网格创建好之后,我们就可以将它添加到场景中并进行渲染.网格对象提供了几个属性和方法用于改变它在场景中的位置和显示效果. 如下: 还有一个属性就是visible属性,默认为true,如果设置为false,THREE.Mesh将不渲染到场景中. mesh对象的前三个属性position,rotation和scal

  • ECMAScript5中的对象存取器属性：getter和setter介绍

    显然这是一个无关IE(高级IE除外)的话题,尽管如此,有兴趣的同学还是一起来认识一下ECMAScript5标准中getter和setter的实现.在一个对象中,操作其中的属性或方法,通常运用最多的就是读(引用)和写了,譬如说o.get,这就是一个读的操作,而o.set = 1则是一个写的操作.事实上在除ie外最新主流浏览器的实现中,任何一个对象的键值都可以被getter和setter方法所取代,这被称之为"存取器属性". 毫无疑问,getter负责查询值,它不带任何参数,setter则

  • PowerShell中Get-Date对象的常用属性和方法介绍

    本文介绍PowerShell中使用Get-Date得到的日期对象的属性和方法,利用好这些对象和方法,可以极大的增强我们开发的灵活性. 使用Get-Date可以获取到一个时间对象,这个时间对象,可不是仅仅用来输出当前时间这么简单.我们来看看它的属性和方法吧,不看白不看. 要想看一个对象的成员(即对象的属性和方法),可以使用管道符,再加上Get-Member这个cmdlet.很方便滴! 复制代码 代码如下: PS C:\Users\zhanghong> Get-Date | Get-Member T

  • vue2.0中set添加属性后视图不能更新的解决办法

    今天在工作中遇到一个问题,郁闷了很久,特地写一篇博客记录一下,方便以后再遇到可以查找,也分享个各位小伙伴,在网上查找很多资料说用Vue.$set设置属性后视图也会更新,但是真相并不是这样,通过等于号赋值和$set方法我都试了,前台属性值改变但是视图并没有改变,下面上图: 我需要做的就是下面的Email和Fax属性的值从第一排的输入框用户输入获取,但是输入过后下面的文本框的值并为发生变化,在浏览器console却发现值已经改变了,这让我很郁闷,网上搜了一堆答案都没有解决,后面查看vue官网有个de

  • 对VUE中的对象添加属性

    背景:在通过接口获取数据集对象后,根据业务场景需要在数据集对象上增加额外的属性 data中定义的数据集对象mindData格式示例如下 mindData: [ {label:'清醒',value:'清醒'}, {label:'朦胧',value:'朦胧'}, {label:'嗜睡',value:'嗜睡'}, {label:'昏睡',value:'昏睡'}, {label:'谵妄',value:'谵妄'}, {label:'模糊',value:'模糊'}] 1) 通过post调用接口获取minDa

  • JavaScript中的对象的extensible属性介绍

    JavaScript中,对象的extensible属性用于表示是否允许在对象中动态添加新的property.ECMAScript 3标准中,所有的对象都是extensible的.ECMAScript 5标准中,所有的对象默认仍是extensible的,但可以通过设定来改变这一属性. 查询一个对象是否是extensible的,可以使用Object.isExtensible()语句: 复制代码 代码如下: var o = {x:1}; console.log(Object.isExtensible(

随机推荐