【Vue】改变 vuex 中的 state ，子组件 watch 监听不到对象值变化。

问题描述

• state 状态文件：

export default {
    
    
  namespaced: true,
  state: {
    
    
  	params: {
    
    
  	  aa: '',
  	  bb: [],
  	}
  },
  mutations: {
    
    
  	initParams(state) {
    
    
      state.params = {
    
    
        aa: '',
  	  	bb: [],
      };
    },
  },
  actions: {
    
    },
}

• 父组件

<template>
<child  childParams="params"/>
</template>

<script>
import {
      
       mapState } from 'vuex';
import child from '@/components/child';
export default {
      
      
  props: {
      
      
    options: Object,
  },
  components: {
      
       child },
  data() {
      
      
    return {
      
      };
  },
  computed: {
      
      
    ...mapState('we-server/insight', ['params']),
  },
  methods: {
      
      },
  watch: {
      
      
    options: {
      
      
      handler(now) {
      
      
      	// 当 options 改变的时候，给 params 添加一个新的属性
      	this.params.name = now.name;
      	// 这里打印是有值的，但是传递给子组件那边 watch 却监听不到
        console.log('64 params =', this.params.name); 
      },
      deep: true,
    },
  },
  mounted() {
      
      },
};
</script>

解决方法

• 给params对象设置一个初始化的属性值即可

export default {
    
    
  namespaced: true,
  state: {
    
    
  	params: {
    
    
  	  aa: '',
  	  bb: [],
  	  name: '',
  	}
  },
  mutations: {
    
    
  	initParams(state) {
    
    
      state.params = {
    
    
        aa: '',
  	  	bb: [],
  	  	name: '',
      };
    },
  },
  actions: {
    
    },
}