我可以跟踪这些操作中的大多数 Mixpanel（一个网站用户行为分析工具） 事件，这使得分析代码非常容易维护。我确实有一些应用程序，其中所有的 Mixpanel 调用都是只在 action 中完成的。我不需要了解哪些数据被跟踪，哪些没有，以及什么时候发送这些信息。以这种工作方式的乐趣简直无法言说。
4. 用 mapState，mapGetters，mapMutations 和 mapActions 简化代码
通常不需要创建多个计算属性或方法，只需在组件内部访问 state/getters 或者调用 actions/mutations 。使用mapState，mapGetters，mapMutations 和 mapActions
可以帮助你简化代码，把来自 store 模块的数据分组到一起，让代码更容易理解。
// NPM import { mapState, mapGetters, mapActions, mapMutations } from "vuex"; export default { computed: { // Accessing root properties ...mapState("my_module", ["property"]), // Accessing getters ...mapGetters("my_module", ["property"]), // Accessing non-root properties ...mapState("my_module", { property: state => state.object.nested.property }) }, methods: { // Accessing actions ...mapActions("my_module", ["myAction"]), // Accessing mutations ...mapMutations("my_module", ["myMutation"]) } };
有关以上工具方法的所有信息都在 Vuex 官方文档。
5. 使用 API 工厂
我通常喜欢写一个this.$api 助手，以便在任何地方调用，获取后台 API 资源。在我的项目根目录有一个api 文件夹，包含了所有相关的类。如下所示（仅部分）：
api ├── auth.js ├── notifications.js └── teams.js
每个文件都将其类别下的所有 API 资源分组。下面是我在 Nuxt 应用中使用插件初始化这个模式的方法（在标准的 Vue 应用中的过程也类似）。
// PROJECT: API import Auth from "@/api/auth"; import Teams from "@/api/teams"; import Notifications from "@/api/notifications"; export default (context, inject) => { if (process.client) { const token = localStorage.getItem("token"); // Set token when defined if (token) { context.$axios.setToken(token, "Bearer"); } } // Initialize API repositories const repositories = { auth: Auth(context.$axios), teams: Teams(context.$axios), notifications: Notifications(context.$axios) }; inject("api", repositories); };
export default $axios => ({ forgotPassword(email) { return $axios.$post("/auth/password/forgot", { email }); }, login(email, password) { return $axios.$post("/auth/login", { email, password }); }, logout() { return $axios.$get("/auth/logout"); }, register(payload) { return $axios.$post("/auth/register", payload); } });
现在，我可以简单地在我的组件或 Vuex action 里像这样调用它们：
export default { methods: { onSubmit() { try { this.$api.auth.login(this.email, this.password); } catch (error) { console.error(error); } } } };
6. 使用 $config 访问环境变量（在模板里特别有用）
你的项目可能在一些文件中定义了一些全局配置变量：
config ├── development.json └── production.json
我喜欢通过 this.$config 助手快速访问它们，特别是在模板里。像往常一样，扩展 Vue 对象非常容易：
// NPM import Vue from "vue"; // PROJECT: COMMONS import development from "@/config/development.json"; import production from "@/config/production.json"; if (process.env.NODE_ENV === "production") { Vue.prototype.$config = Object.freeze(production); } else { Vue.prototype.$config = Object.freeze(development); }
7. 按照某个约定来给代码提交命名
随着项目的增长，你可能需要定期浏览组件的历史记录。如果你的团队没有遵循相同的约定来命名他们的提交，那么理解每个提交将会变得更加困难。
我一直推荐使用 。我在每个项目中都遵循它，在很多情况下，其他团队成员很快就会发现遵循它带来的好处。
遵循这些指导原则可以得到更具可读性的信息，这使得在查看项目历史记录时更容易跟踪提交。简而言之，它是这样工作的：
git commit -am "<type>(<scope>): <subject>" # 举例 git commit -am "docs(changelog): update changelog to beta.5" git commit -am "fix(release): need to depend on latest rxjs and zone.js"
看下他们的 README 文件 了解更多了解更多关于它和相关约定。
8. 项目上线后固定 package 版本
我知道，所有 package 都应该遵循语义化版本规则。但现实情况是，有些根本没有遵守。
为了避免因为某个依赖项破坏了整个项目而不得不在半夜醒来，锁定所有 package 版本可以让你的早晨工作压力更小。
它的意思很简单：避免使用带 ^ 前缀的版本号：