本文不会放api的用法，建议先看看是怎么用的

项目架构

采用monorepo的形式，项目目录下有多个子项目，下面放了资料链接和几处用法，其他本文不多赘述。

现代前端工程为什么越来越离不开 Monorepo?
为什么使用pnpm可以光速建立好用的monorepo（比yarn/lerna效率高）
pnpm workspace文档

1.响应式

目的

实现一个神奇的函数auto，会在state.count改变后，自动运行里面的函数

1
2
3
4
5

autoRun(() => {
    document.getElementById("app").innerText = state.count;
})

state.count++; // 重新执行autoRun内的函数

所谓事件总线，就是实例化Vue对象，在该实例上通过$on绑定事件、$emit触发事件、$off解绑事件，进行组件通信。

一、使用

实例化Vue对象，并挂载到Vue.prototype

1

Vue.prototype.$bus = new Vue();

二、场景

在多个页面复用一个组件时，每个页面需要有点击按钮后，触发不同的事件

当然可以监听路由进行判断调用不同的函数，但是这样会在一个组件内写上很多其他组件应该触发的事件。

我们利用EventBus可以做到组件间的解耦

三、使用方法

1.我们在各个页面上写好事件触发后调用的函数，然后在mounted（如果用keep-alive则是在activated，否则只挂载一次）this.$bus.$on上绑定该事件，在beforeDestory（如果用keep-alive则是在deactived，否则无法解绑事件）上用this.$bus.$off解绑事件。

1
2
3
4
5
6
7
8
9
10
11

mounted() {
    this.$bus.$on("save", this.save);
}

beforeDestory() {
    this.$bus.$off("save", this.save);
}

save() {
    console.log("我没有写在复用组件上哦！")
}

2.然后在复用的组件上触发事件

1

this.$bus.$emit('save');

也算是第一次尝试使用EventBus把，很好的降低了组件间的耦合度

针对刷新时vuex数据丢失，使用了vuex-persistedstate对vuex进行持久化处理
官方github：https://github.com/robinvdvleuten/vuex-persistedstate

本文主要是对官网不够详细的案例进行补充，官网只讲了对vuex完全存储和对vuex模块的完全存储。
但是我想对某一模块内部一些变量进行存储，谷歌了好多都没找到写法，自己试出来了。