首页 > 其他 > 详细

65. VUE Mutation响应规则

时间:2021-08-21 15:33:32      阅读:43      评论:0      收藏:0      [点我收藏+]

现在我的state中的变量user 有一个人:  技术分享图片

我需要添加一个属性给他,即:【这里不用JS函数】

技术分享图片 技术分享图片

运行发现 页面并没有添加这个address,但是肖丽雅的属性中是包含address的,说明这没有做到响应式:

技术分享图片

 

 

所以这种方式是做不到响应式的,除了JS函数 还可以这样: VUE.set(xx,yy,zz):

技术分享图片  这个函数三个属性 圈起来了  这样写即可:

 

因为我们user是对象 所以第二个属性用 key:

具体代码如下:

技术分享图片
<template>
  <div id="app">
       <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>爱好</th>
          <th>生日</th>
          <th>地址</th>
        </tr>
      </thead>
      <tbody>
          <tr v-for="(item,index) in $store.state.user" :key="index">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.hobby}}</td>
            <td>{{item.birthday}}</td>
            <td>{{item.address}}</td>
          </tr>

      </tbody>
    </table>

      <br><br>
      <button @click="addAttribute">添加新属性address</button>
  </div>
</template>
  

<script>
export default {
  methods:{
        addAttribute(){
          const add = "北京朝阳";
          this.$store.commit(addAttribute,add);
        }
    }
    
  }
  
</script>


<style scoped>
  table{
    border: 1px black solid;
    border-collapse: collapse;
    border-spacing: 0;
}

th,td{
padding: 8px 16px;
border: 1px solid black;
    text-align: left;
}

th{
    background-color: #f7f7f7;
    color: black;
    font-weight: 600;
}
</style>
App.vue App组件
技术分享图片
import Vue from ‘vue‘
import Vuex from ‘vuex‘

Vue.use(Vuex)   


const myVuex = new Vuex.Store({
    state:{
        user:
        [
            {name:"肖丽雅",age:18,hobby:‘Basketball‘,birthday:‘2002-5-16‘},
        ],

    },             

    mutations:{                     
        addAttribute(state,payload){
            Vue.set(state.user[0],"address",payload)
        }
    },              
    
    getters:{
        
    },
    actions:{},
    modules:{},
});


export default myVuex   //导出VUX对象
index.js VUEX配置文件

 

说了添加响应式 来一个删除的:

delete  这个可以直接删除属性的,但是也做不到响应式:

技术分享图片    技术分享图片

 

可以发现 虽然是没了 单身视图不会响应式:

技术分享图片

 

 

那么除了JS函数 我们还可以用 vue.delete 来完成:

技术分享图片  两个参数 ,,因为我们这里是对象 所以第二个参数用 key即可:

 

 

技术分享图片

 

 

这样就可以响应式了:

技术分享图片

 

 

 

 

 可以看到 名字没了。

 

65. VUE Mutation响应规则

原文:https://www.cnblogs.com/bi-hu/p/15168956.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!