数据的响应式原理

组件或Vuex中store对象的state 是响应式的前提是：数据必须是提前初始化好的
如：为对象新增属性，则view视图不会更新
向student对象中添加一个sex属性

<template>
  <div id="app">
    <h2>{{ $store.state.student }}</h2>
    <button @click="changeStudent">增加属性sex</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {}
  },
  methods: {
    changeStudent() {
      this.$store.commit('Cstudent')
    }
  }
}
</script>

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    student: {
      age: 18,
      name: 'xiaowang'
    }
  },
  mutations: {
    Cstudent(state) {
      console.log(state.student)  //sex属性已经存在 ，但视图不会更新，因为sex属性不是一开始就初始化好的
      state.student['sex'] = '男'
    }
  }
})
export default store

image.png

如何把sex属性增加到响应式系统中呢？ 方式一：通过Vue.set()方法
该方法接收三个参数（"对象/数组"，"key/索引"，"修改后的值"）

  mutations: {
    Cstudent(state) {
      console.log(state.student)
      // state.student['sex'] = '男'
      Vue.set(state.student, "sex", "男")
    }
  }

image.png

删除对象中某一属性值 使用delete 无法做到响应式，可以通过Vue.delete()做到响应式

Vue.delete(state.student, 'name')

方式二：以新对象替换老对象

   mutations: {
    Cstudent(state) {
      console.log(state.student)
      // state.student['sex'] = '男'
      // Vue.set(state.student, "sex", "男")
      state.student = {  //利用对象展开运算符
        ...state.student,
        sex: '男'
      }
    }
  }

删除name属性可以写为

  mutations: {
    Cstudent(state) {
      state.student = {
        age: 18
      }
    }
  }