课程

vue技术栈开发实战

https://segmentfault.com/ls/1650000016221751

iview-admin作者 Lison 出品

个人学习笔记1-7

1 vue-cli 3.0npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm install -g @vue/cli2 路由path: '/argu/:name',alias: '/home_page',name: 'argu',components: { default: () => import('@/views/child.vue'), email: () => import('@/views/email.vue'), // 多个组件 tel: () => import('@/views/tel.vue')},meta: { title: 'home'},children: []redirect: to => '/' //重定向<router-view key="default"/><router-view key="email" name="email"/><router-view key="tel" name="tel"/>{{ $route.params.name }}this.$router.push({ name: `argu`, params: { name: 'lison' }, query:{} path:`/argu/${names}`})3 路由{ path: '/argu/:name', name: 'argu', component: () => import('@/views/argu.vue'), props: true props: { food: 'banana' //第二种 }, props: route => ({ //第三种 food: route.query.food }),},{{ food }}export default { props: { food : { type: String, default: 'lison' } }, beforeRouteEnter (to, from, next) { next(vm => { console.log(vm) }) }, beforeRouteLeave (to, from, next) { // const leave = confirm('您确定要离开吗？') // if (leave) next() // else next(false) next() }, beforeRouteUpdate (to, from, next) { console.log(to.name, from.name) }}export const setTitle = (title) => { window.document.title = title || 'admin'}const HAS_LOGINED = truerouter.beforeEach((to, from, next) => { to.meta && setTitle(to.meta.title) if (to.name !== 'login') { if (HAS_LOGINED) next() else next({ name: 'login' }) } else { if (HAS_LOGINED) next({ name: 'home' }) else next() }})

1. 导航被触发2. 在失活的组件（即将离开的页面组件）里调用离开守卫 beforeRouteLeave3. 调用全局的前置守卫 beforeEach4. 在重用的组件里调用 beforeRouteUpdate5. 调用路由独享的守卫 beforeEnter6. 解析异步路由组件7. 在被激活的组件（即将进入的页面组件）里调用 beforeRouteEnter8. 调用全局的解析守卫 beforeResolve9. 导航被确认10. 调用全局的后置守卫 afterEach11. 触发DOM更新12. 用创建好的实例调用beforeRouterEnter守卫里传给next的回调函数

4 bus父子组件 单向数据量 父到子 属性 子修改 事件修改<input @input="handleInput" :value="value"/> // 子组件handleInput (event) { const value = event.target.value this.$emit('input', value)}<a-input @input="handleInput"/> //父组件<a-show :content="inputValue"/>components: { AInput, AShow},methods: { handleInput (val) { //获取 this.inputValue = val }}兄弟组件import Vue from 'vue'const Bus = new Vue()export default Busimport Bus from './lib/bus'Vue.config.productionTip = falseVue.prototype.$bus = Busmethods: { handleClick () { this.$bus.$emit('on-click', 'hello') }}mounted () { this.$bus.$on('on-click', mes => { this.message = mes })}5 vuex-- setter getterconst state = { appName: 'admin'}const getters = { appNameWithVersion: (state) => { return `${state.appName}v2.0`}}const getters = { firstLetter: (state) => { return state.userName.substr(0, 1) }}export default stateimport { mapState, mapGetters } from 'vuex'computed: {appName () { return this.$store.state.appName},...mapState({ userName: state => state.user.userName}),...mapGetters([ 'appNameWithVersion', 'firstLetter']),}6 vuex-mutation_action_moduleconst mutations = { // 修改store值 SET_APP_NAME (state, params) { state.appName = params }, SET_APP_VERSION (state) {vue.set(state, 'appVersion', 'v2.0') }}import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'methods: { ...mapMutations([ 'SET_USER_NAME', 'SET_APP_NAME' ]), ...mapActions([ 'updateAppName' ])，handleChangeAppName () { // this.$store.commit({ // type: 'SET_APP_NAME', // appName: 'newAppName' // })this.SET_APP_NAME({ appName: 'newAppName'})}const actions = { // updateAppName ({ commit }) { // getAppName().then(res => { // const { info: { appName } } = res // commit('SET_APP_NAME', appName) // }).catch(err => { // console.log(err) // }) // } async updateAppName ({ commit }) { try { const { info: { appName } } = await getAppName() commit('SET_APP_NAME', appName) } catch (err) { console.log(err) } }}...mapActions([ 'updateAppName']),7 vuex进阶 持久化存储storeexport default store => { if (localStorage.state) store.replaceState(JSON.parse(localStorage.state)) store.subscribe((mutation, state) => { localStorage.state = JSON.stringify(state) })}import saveInLocal from './plugin/saveInLocal'plugins: [ saveInLocal ]strict 严格模式<a-input v-model="stateValue"/>SET_STATE_VALUE (state, value) { state.stateValue = value}stateValue: { get () { return this.$store.state.stateValue }, set (val) { this.SET_STATE_VALUE(val) }},