VUE learning content
Routing guard
- Complete navigation resolution process
1) navigation is triggered.
2) inactivation of components in the call to leave the guard.
3) calls global beforeEach guard.
4) call beforeRouteUpdate guarding the component reuse in
5) call routing configuration in beforeEnter.
6) Analytical asynchronous routing components.
7) calls beforeRouteEnter in the activated components inside.
8) calls the global beforeResolve guard
9) navigation is confirmed.
10) calls global afterEach hook.
11) triggered DOM updates.
12) with a call to create a good example in beforeRouteEnter guard passed to the next callback function.
- Navigation guards
1) Global Front guard
router.beforeEach((to, from, next) => { })
Guard is analyzed and executed asynchronously, this time in the navigation has been finished before all the guards resolve waiting
2) Global analytical guard
router.beforeResolve((to, from, next) => { })
Before navigation be confirmed, and after guard and asynchronous routing component is resolved in all components, it is called parsing guard
3) global rear hook
router.afterEach((to, from) => { })
These hooks will not accept the next function will not change the navigation itself
4) routing exclusive guard
beforeEnter: (to, from, next) => {} (defined directly on the routing configuration)
5) within the guard assembly
beforeRouteEnter (to, from, next) {
// call render the component corresponding route is pre-confirm
// Do not! can! Examples acquisition component 'this', because the current guard execution component instance has not been created
// But support for next pass a callback},
beforeRouteUpdate (to, from, next) {
// in the current route changes, but called when the component is multiplexed
// access component instance 'this'},
beforeRouteLeave (to, from, next) {
// Called when the corresponding left navigation route of the component
// access component instance 'this'}
VUEX
- Five basic objects
1) state: storing state (variable)
2) getters: prior to re-compile the data acquisition, to be understood that the state property is calculated. We use the $ sotre.getters.fun in the component ()
3) mutations: modified state, and is synchronous. Use $ store.commit ( '', params) in the assembly. This component of our custom event similar.
4) actions: asynchronous operation. Is used in the assembly $ store.dispath ( '')
5) modules: store sub-module, in order to develop large-scale projects to facilitate the management and use of state. We will not explain here, and with them the same as above.
- vuex in the module namespace concept
Cause 1) the use of namespaces
By default, inside the module action, mutation and getter are registered in the global namespace. This will lead to
a) different modules have the same naming mutations, actions, the different modules mutation or respond to the same action.
b) When a project module in the store a lot of points when, at the time of helpers mapState, mapGetters, mapMutations, mapActions, difficult inquiry, citing the state, getters, mutations, actions from which module, repairing troubles.
2) Method using namespace
By adding namespaced: true way to make it a module with a namespace. When the module is registered, all of getter, action and mutation are automatically adjusted based on the path name registration module.
a) adding the module namespaced: true, starts namespace
b) introducing the module and store the root mount
c) the first parameter of the auxiliary function mapState, the fill module namespace name.
Or, created by using createNamespacedHelpers auxiliary function based on a namespace. It returns an object, the object, there are new binding components on a given namespace value binding helper.