// 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 Factories
我通常会创建this.$api助手，可以在任何地方访问我的API入口。我的项目根目录有一个api文件夹有我的所有类（如下）。
api ├── auth.js ├── notifications.js └── teams.js
每一个都是一类接口的分组，这是我在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操作中调用他们，如下：
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.遵守一个commit命名规则。
在项目发展的过程中，经常需要关注组件的变更历史。如果团队中有人没有遵守commit惯例，那么将很难理解他们所做的事情。
我总是使用并推荐。我所有的项目中都会使用他，通常团队中的其他人也会发现他的好处。
遵守这些规则使commit更加可读，在查看项目历史时使得commit更加容易追踪。简言之，他是这样用的：
git commit -am "<type>(<scope>): <subject>" # Here are some samples git commit -am "docs(changelog): update changelog to beta.5" git commit -am "fix(release): need to depend on latest rxjs and zone.js"
看他们的更新更多。
8.始终在生产环境中冻结Package的版本。
我知道...所有软件包都应遵循 the semantic versioning rules.。但实际情况并非如此。😅
为了避免一个依赖影响了整个项目在半夜被拖起来，冻结所有程序包的版本可以使你一觉睡到天明并且工作愉快。 😇
这很简单：避免以^开头的版本：
{ "name": "my project", "version": "1.0.0", "private": true, "dependencies": { "axios": "0.19.0", "imagemin-mozjpeg": "8.0.0", "imagemin-pngquant": "8.0.0", "imagemin-svgo": "7.0.0", "nuxt": "2.8.1", }, "devDependencies": { "autoprefixer": "9.6.1", "babel-eslint": "10.0.2", "eslint": "6.1.0", "eslint-friendly-formatter": "4.0.1", "eslint-loader": "2.2.1", "eslint-plugin-vue": "5.2.3" } }
9. 显示一个大的数据时应该使用Vue虚拟滚动条。
在页面中显示多行或需要循环大量数据时，你已经注意到该页面渲染速度很快变慢。 要解决此问题，您可以使用vue-virtual-scoller。
npm install vue-virtual-scroller
他只渲染列表中的可见项并且复用组件和dom元素，以使其尽可能高效。 如此简单就像一个魔法！ ✨