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

问题描述

• state 状态文件：

export default {
  namespaced: true,
  state: {
  	params: {
  	  aa: '',
  	  bb: [],
  	}
  },
  mutations: {
  	initParams(state) {
      state.params = {
        aa: '',
  	  	bb: [],
      };
    },
  },
  actions: {},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

• 父组件

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

解决方法

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

export default {
  namespaced: true,
  state: {
  	params: {
  	  aa: '',
  	  bb: [],
  	  name: '',
  	}
  },
  mutations: {
  	initParams(state) {
      state.params = {
        aa: '',
  	  	bb: [],
  	  	name: '',
      };
    },
  },
  actions: {},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20