vue组件中无法获取state中的值

Question

在vue中，使用vuex，有两个vue组件文件
第一个vue组件设置了state中searchPoint:{},的其中一个属性为count

在第二个vue组件中需要用到这个数据，在computed中是这样写的

  computed:{ 
  search_points_count(){
    console.log(this.$store.state);
     return this.$store.state.searchPoint.count; 
   }
  },
       

对这个数据进行监听：

watch:{
      search_points_count(val){  
             console.log(val) 
           
      }
    },
    

在浏览器中运行后，控制台会输出state

可以看到count是有值的，但是return的值却没有，如果将console.log(this.$store.state);换成console.log(this.$store.state.searchPoint.count);发现对这个值不进行监听了，
只返回了undefined，
但是如果在家state设置的时候设置为searchPoint:{count：0}，就会报堆栈溢出

这个问题哪位大神能帮我解决一下下，焦头烂额了~~

如何获得并监听这个值呢？？

Answer 1

你在vuex 中的 state 是如何定义的是否有初始值
如果你的state = {searchPoint: {}, .....}
设置count时使用state.searchPoint.count = *
vue是监听不到count的变化的
你需要初始化时设置state = {searchPoint: {count: ''}, .....}
或者给count赴值时改变searchPoint的指向，
如state.searchPoint = {count: **, ....}
或者state.searchPoint=Object.assign({}, state.searchPoint, {count: *})