vue.js全家桶

掌握vue-router用法和技巧

配置

routes: [
 {
   path: '/',
   name: 'home',
   component: Home
 },
 {
   path: '/about',
   name: 'about',
   // 路由层级代码分割，生成分片(about.[hash].js)
   // 当路由房问时会懒加载.
   component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
 }
]

指定路由器

// main.js
new Vue({
 router,
 render: h => h(App)
}).$mount('#app')

路由视图

导航链接

Home
About

路由嵌套

// router.js
{
 path: "/",  
 component: Home,  
 children: [{ path: "/list", name: "list", component: List }]
}
// Home.vue

动态路由

{ path: "detail/:id", component: Detail },

路由守卫
全局守卫，router.js

router.beforeEach((to, from, next) => {
 // 要访问/about且未登录需要去登录
 if (to.meta.auth && !window.isLogin) {
  if (window.confirm("请登录")) {
   window.isLogin = true;
   next();  // 登录成功，继续 
 } else {
   next('/');// 放弃登录，回首页
 }
} else {
  next(); // 不需登录，继续 
}
});

路由独享守卫

beforeEnter(to, from, next) {
  // 路由内部知道自己需要认证
  if (!window.isLogin) {
    // ...
 } else {
    next();
 }
},

组件内的守卫

export default {
  beforeRouteEnter(to, from, next) {
    //this不能用
 },
 beforeRouteUpdate(to, from, next) {},
 beforeRouteLeave(to, from, next) {}
};

动态路由

// 异步获取路由
api.getRoutes().then(routes => {
  const routeConfig = routes.map(route => mapComponent(route));
  router.addRoutes(routeConfig);
})
// 映射关系
const compMap = {
 'Home': () => import("./view/Home.vue")
}
// 递归替换
function mapComponent(route) {
  route.component = compMap[route.component];
  if(route.children) {
     route.children = route.children.map(child => mapComponent(child))
   }
  return route
}

面包屑

// Breadcrumb.vue
watch: {
  $route() {
    // [{name:'home'},{name:'list'}]
    console.log(this.$route.matched);
    // ['home','list']
    this.crumbData = this.$route.matched.map(m => m.name)
 }
}

理解vue-router实现原理

1.实现插件
2.url变化监听
3.路由配置解析： {‘/’: Home}
4.实现全局组件：router-link router-view

class VueRouter {
constructor(options) {
 this.$options = options;
 this.routeMap = {};
 // 路由响应式
 this.app = new Vue({
  data: {
   current: "/"
  }
 });
}
init() {
 this.bindEvents(); //监听url变化
 this.createRouteMap(this.$options); //解析路由配置
 this.initComponent(); // 实现两个组件
}
bindEvents() {
 window.addEventListener("load", this.onHashChange.bind(this));
 window.addEventListener("hashchange", this.onHashChange.bind(this));
}
onHashChange() {
 this.app.current = window.location.hash.slice(1) || "/";
}
createRouteMap(options) {
 options.routes.forEach(item => {
  this.routeMap[item.path] = item.component;
 });
}
initComponent() {
 // router-link,router-view
 // fff
 Vue.component("router-link", {
  props: { to: String },
  render(h) {
   // h(tag, data, children)
   return h("a", { attrs: { href: "#" + this.to } }, [
    this.$slots.default
   ]);
  }
 });
 // 
 Vue.component("router-view", {
  render: h => {
   const comp = this.routeMap[this.app.current];
   return h(comp);
  }
 });
}
}
VueRouter.install = function(Vue) {
// 混入
Vue.mixin({
 beforeCreate() {
  // this是Vue实例
  if (this.$options.router) {
   // 仅在根组件执行一次
   Vue.prototype.$router = this.$options.router;
   this.$options.router.init();
  }
 }
});
};

掌握vuex理念和核心用法

整合vuex

vue add vuex

状态和状态变更

export default new Vuex.Store({
 state: { count:0 },
 mutations: {
  increment(state, n = 1) {
   state.count += n;
 }
}
})

使用状态，vuex/index.vue

派生状态 - getters

export default new Vuex.Store({
 getters: {
  score(state) {
   return `共扔出：${state.count}`
 }
}
})

登录状态文字，App.vue

{{$store.getters.score}}

动作 - actions

export default new Vuex.Store({
 actions: {
  incrementAsync({ commit }) {
   setTimeout(() => {
    commit("increment", 2);
  }, 1000);
 }
}
})

使用actions：

模块化

const count = {
 namespaced: true,
 // ...
};
export default new Vuex.Store({
  modules: {a: count}
});

使用变化，components/vuex/module.vue

vuex原理解析

vuex也是一个插件
实现四个东西：state/mutations/actions/getters
创建Store
数据响应式

let Vue;
function install(_Vue) {
 Vue = _Vue;
 
 // 这样store执行的时候，就有了Vue，不用import
 // 这也是为啥Vue.use必须在新建store之前
 Vue.mixin({
  beforeCreate() {
   // 这样才能获取到传递进来的store
   // 只有root元素才有store，所以判断一下
   if (this.$options.store) {
    Vue.prototype.$store = this.$options.store;
  }
 }
});
}
class Store {
 constructor(options = {}) {
  this.state = new Vue({
   data: options.state
 });
  this.mutations = options.mutations || {};
   this.actions = options.actions;
   options.getters && this.handleGetters(options.getters);
}
 // 注意这里用箭头函数形式，后面actions实现时会有作用
commit = (type, arg) => {
  this.mutations[type](this.state, arg);
};
dispatch(type, arg) {
  this.actions[type](
  {
    commit: this.commit,
    state: this.state
  },
   arg
 );
}
handleGetters(getters) {
  this.getters = {}; // 定义this.getters
  // 遍历getters选项，为this.getters定义property
  // 属性名就是选项中的key，只需定义get函数保证其只读性
  Object.keys(getters).forEach(key => {
   // 这样这些属性都是只读的
   Object.defineProperty(this.getters, key, {
    get: () => { // 注意依然是箭头函数
     return getters[key](this.state);
   }
  });
 });
}
}
export default { Store, install };