watch监听器与computed计算属性项目实战

项目导航栏有一个首页点击按钮，侧边栏也有首页点击按钮与若干个其他选项按钮。在实现点击首页按钮导航栏的首页按钮必须出现阴影，点击侧边栏其他按钮时，导航栏按钮阴影需消失，如下图所示：由于首页的按钮与侧边栏按钮在两个不同的组件，两个组件的数据也只能通过vuex存储，组件想要访问数据，可以使用computed属性存储数据，使用watch监听属性监听在点击侧边栏时数据的变化。
在侧边栏按钮组件如下图设置：
在activeMenu方法中由于可以获取route可以得到path。在data属性中定义path将route中的path赋值给data中的path再使用watch监听属性监听path的变化如下所示
watch: {
path(newVal) {
this.DataProcess();
}
}
在mounted生命周期中调用DataProcess()方法如下图所示
在data中配置一个bgcClass判断path数据变化，如果用户点击的是首页按钮则把bgcClass这只为false反之则为true。两者都是将bgcClass的数据传递给vuex。我使用的方法是用dispatch方法。
在store中设置了app.js其中配置如下
在actions中配置
bgcClass({ commit }, value) {
commit(‘BGC_CLASS’, value);
}
在mutations中配置
BGC_CLASS: (state, value) => {
state.bgcClass = value;
}
别忘了必须要在state中配置一个初始值
state = {
bgcClass: null,
}
在导航栏组件配置如下
使用mapState可以接受vuex中的数据，如下图所示：
当然也需要监听vuex中传递过来的数据。如下所示：
watch: {
bgcClass(newVal) {
this.DataProcess();
}
}
最后在改组件中的template使用:class如下图所示：
在子组件接受父组件数据时可以使用以上的监听方法监听数据的改变，也可以使用如下图所示的方法监听数据，dataQuantity为父组件传递过来的数据，使用deep执行深度监听。
在这里想说一下父子组件生命周期的执行顺序，
先执行beforeCreate(父)->created(父)->beforemounte(父)->beforecreate(子)->created(子)->beforecreate(子)
->mounted(子)->mounted(父)->beforedestory(父)->beforedestory(父)->destoryed(子)->destoryed(父)
一般我是在父组件的created生命钩子中接收数据，所以在子组件的created钩子组件中是打印不了父组件传递过来的数据，然而在子组件的mounted仍然打印不出数据，子组件的mounted先于父组件的mounted执行，因为父组件还没有渲染完成，父组件的数据是无法通过组件的形式传递给子组件。
所以可以使用以上方式监听传过来的数据。
以上观点只是个人开发经验所得，如果有些地方有错误，还望指点！