利用computed和watch实现监听Vuex状态监听

有时候我发现在学一门新知识的时候发现，直接看教程总是看不进去，然后在项目中碰到了在回头看发现反而理解得更好些，记得也更牢些。比如标题中这个知识点，现在项目中有用到，因此在这里做个总结。

你可以像这样实现对vuex全局状态的监听

computed: {
    f1() {
        return this.$store.state.xxxx
  }
},
watch: {
    f1(curVal, oldVal) {
          //这里的curVal就是需要监听的值
    }
 }

computed 里一般写个函数，这个函数里一定是return一个结果。这里你可以直接用f1作为本组件监听$store.state.xxxx，也可以在本组件里声明一个变量然后再通过watch监听，将watch中的curVal赋值给该变量从而达到使用的目的。

链接：https://www.jianshu.com/p/b5365c05882b

watch监听和双向绑定的案例

父组件：

<template>
  <div class="ctn">
      <!-- 属性绑定传值给子组件， 自定义事件接收子组件的值 -->
   <Watchzi  :number1="num1" @num1change="num1change" />
   <p> 父组件：{{num1}}</p>
  </div>
</template>
<script>

import Watchzi from './watchZi.vue'
export default {
  components: { Watchzi },
    data() {
        return{
            num1:'100'
        }
    },
    methods: {
        num1change(val){
            this.num1 = parseFloat(val)
        }
    }
}
</script>

子组件：

<template>
  <div class="ctn">
      <input type="text" v-model="dnumber1">
      <!-- v-model：是input事件 和value属性绑定的结合 -->
    <!-- <input type="text" :value="dnumber1" @input="num1Input"  /> -->
    <p>{{name}}</p>
  </div>
</template>
<script>
export default {
    props: {
        number1: Number,
        number2: Number
    },
    data() {
        return{
            dnumber1:this.number1,
            dnumber2: this.number2,
            name: '1'
        }
    },
    watch: {
        // 监听属性变化的时候，并向父组件传值
        dnumber1(newValue){
            this.dnumber2 = newValue * 100;
            // 向父组件传值
            this.$emit('num1change', newValue);
        },
        // 你监听什么属性就写什么名字，比如监听name属性，就写name方法
        name(newValue) {
            // 监听到属性的改变，就可以做其他事情了
            console.log(newValue)
        }

    }
}
</script>