vue技術棧開發實戰

https://segmentfault.com/ls/1650000016221751

iview-admin作者 Lison 出品

個人學習筆記1-7

1 vue-cli 3.0

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g @vue/cli

2 路由

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 = true

router.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. 在失活的組件（即將離開的頁面組件）裏調用離開守衛 beforeRouteLeave
3. 調用全局的前置守衛 beforeEach
4. 在重用的組件裏調用 beforeRouteUpdate
5. 調用路由獨享的守衛 beforeEnter
6. 解析異步路由組件
7. 在被激活的組件（即將進入的頁面組件）裏調用 beforeRouteEnter
8. 調用全局的解析守衛 beforeResolve
9. 導航被確認
10. 調用全局的後置守衛 afterEach
11. 觸發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 Bus

import Bus from ‘./lib/bus‘

Vue.config.productionTip = false
Vue.prototype.$bus = Bus

methods: {
  handleClick () {
    this.$bus.$emit(‘on-click‘, ‘hello‘)
  }
}

mounted () {
  this.$bus.$on(‘on-click‘, mes => {
    this.message = mes
  })
}

5 vuex-- setter getter

const state = {
  appName: ‘admin‘
}
const getters = {
    appNameWithVersion: (state) => {
        return `${state.appName}v2.0`
}
}

const getters = {
    firstLetter: (state) => {
        return state.userName.substr(0, 1)
    }
}

export default state

import { mapState, mapGetters } from ‘vuex‘
computed: {
appName () {
  return this.$store.state.appName
},
...mapState({
  userName: state => state.user.userName
}),
...mapGetters([
  ‘appNameWithVersion‘,
  ‘firstLetter‘
]),
}

6 vuex-mutation_action_module

const 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進階   
持久化存儲

store

export 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)
  }
},
 

vue技術棧開發實戰--課程1-7--筆記