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配置文件