vue3中使用vuex（简单版）

项目中需要解决的问题：

   刷新页面后顶部导航组件的高亮；

   底部组件的页面对应顶部导航组件的高亮；

   首页中一些按钮的点击跳转页面后，首页高亮没消失；

 

 一开始写的时候，是在顶部导航组件中定义了一个num变量去控制高亮，然后保存num的值到sessionStorage里面，页面加载的时候去获取本地num的值来实现页面刷新后高亮不消失；然后首页中的按钮的点击事件里再去改变本地存的num的值，但是这里就会出现一个问题：因为路由跳转并不会引起页面刷新，所以改变了num的值也只是本地存的num值变了，顶部导航组件中num的值还是不会发生改变。按照一开始写的，总有忽略的地方，就是忽略了上面描述的问题，而且还是多个组件中去控制num的值，思来想去，就改用 vuex 来解决了。

1、先在 store 文件夹下的 modules 文件夹中建一个 active.js 文件，store文件夹下的 index.js 是用来导出 modules文件夹下的多个js文件：

 2、active.js文件中的内容：

 

 3、组件中用的话直接引入就可以使用了，下面是顶部导航组件中的使用：

 

这样就实现了多个组件可以改变num的值， 顶部导航组件还是底部组件中，点击li跳转到对应的页面后，对应顶部导航的li高亮。

 4、页面刷新，顶部导航组件的高亮状态保持，这里我直接去判断路由了，看着下面的代码可能会觉得有点呆：

 

 5、首页中的一些跳转页面的按钮的点击事件，这里因为有些按钮点了之后没跳转，能跳转的按钮就只有2个（其他页面都还没有），然后就直接这样写了，首页去跳转这两个页面的话，就改变num的值，让顶部的首页的高亮消失：

emmm...经验不多，不知道能不能让你看懂。也希望有大佬路过能指点一二哈！