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

当我们给Vuex中的state中的对象添加新属性时，可能会遇到以下问题：

1. 添加新属性后，该属性的初始值可能不会被监听到
2. 在异步操作中添加属性会影响组件的响应性

解决这些问题的方案是使用Vue.set()或this.$set()方法。

Vue.set()和this.$set()都是Vue框架提供的全局方法，用来在响应式对象中设置值。下面，我们分别对Vue.set()和this.$set()方法进行详细说明，并且分别给出示例说明。

使用Vue.set()

Vue.set()方法接收3个参数：对象、属性名、属性值。当对象不存在该属性时，会自动添加该属性，并保证该属性是响应式的。

示例1：使用Vue.set()方法给state中的对象添加新属性

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    user: {
      name: 'Jack'
    }
  },
  mutations: {
    changeUser(state) {
      Vue.set(state.user, 'age', 18)
    }
  }
})

上述代码中，我们给state中的user对象添加了新属性age。由于使用了Vue.set()方法，该属性是响应式的。我们在mutation中使用Vue.set()方法添加了新属性age。

示例2：使用Vue.set()方法在异步操作中给state中的对象添加新属性

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    user: {
      name: 'Jack'
    }
  },
  mutations: {
    async getUserInfo(state) {
      const { data } = await axios.get('/api/userInfo')
      Vue.set(state.user, 'age', data.age)
    }
  }
})

上述代码中，我们在异步操作中给state中的user对象添加了新属性age。由于使用了Vue.set()方法，该属性是响应式的。

使用this.$set()

this.$set()方法与Vue.set()方法作用相同，同样也是用来在响应式对象中设置值的。在Vue组件中，可以使用this.$set()方法来设置值。

示例3：在Vue组件中使用this.$set()方法给state中的对象添加新属性

<template>
  <div>
    <p>{{user.name}}</p>
    <p>{{user.age}}</p>
    <button @click="changeUserInfo">改变用户信息</button>
  </div>
</template>

<script>
export default {
  name: 'UserInfo',
  computed: {
    user() {
      return this.$store.state.user
    }
  },
  methods: {
    changeUserInfo() {
      this.$set(this.$store.state.user, 'age', 18)
    }
  }
}
</script>

上述代码中，我们在Vue组件中使用了this.$set()方法给state中的user对象添加了新属性age。由于使用了this.$set()方法，该属性是响应式的。我们在methods中使用this.$set()方法添加了新属性age。