Vue监听vuex中对象属性变化的方法

Vue监听vuex中对象属性变化的方法

需求分析：

store中有一个空对象monitorGetTargetList

页面上有多个按钮，每个按钮都有一个id

点击某个按钮之后，每隔一秒计算出一个数据，需要传到store的monitorGetTargetList中，并放到对应按钮的id中

解决方法：

普通的vuex监听不能监听到对象中的属性以及属性值的变化，所以需要借助Object.assign()来实现

注：
Object.assign()方法接收多个参数，第一个参数为目标对象，第二个及其以后的参数为源对象，该方法会将所有源对象中的属性全部复制到目标对象中并返回。（若源对象中有重复的属性，后面的会把前面的乃至目标对象中的同名属性覆盖掉）

MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

代码示例：

store/index.js

const store = new Vuex.Store({
	state: {
		monitorGetTargetList: {}
	},
	getters: {
		getMonitorGetTargetList: state => state.monitorGetTargetList 
	},
	mutations: {
		 setMonitorGetTargetList(state, params) {
            const { id, data } = params;
            if(!state.monitorGetTargetList.hasOwnProperty(id)) {
                state.monitorGetTargetList = Object.assign({}, state.monitorGetTargetList, {
                    [id]: []
                })
            }
            let arr = Array.from(state.monitorGetTargetList[id]);
            arr.push(data);
            state.monitorGetTargetList = Object.assign({}, state.monitorGetTargetList, {
                [id]: arr
            })
        }
	}
}

export default store;

target.vue

<script>
import { mapGetters } from "vuex";

export default {
	computed: {
		...mapGetters(["getMonitorGetTargetList"])
	},
	watch: {
		getMonitorGetTargetList(data) {
			console.log(data)
		}
	}
}
</script>