狀態管理Vuex

路由Router

1. 配置 {path:'/login',component:Login}
2. 路由出口 router-view
3. 傳參
   • {path:'/login/:id',component:Login} $route.params.id
   • ?foo=aaa $route.query.foo
4. 守衛
   • 全局 router.beforeEach
   • 路由beforeEnter
   • 組件beforeRouteEnter
5. 嵌套 {children:[]}

狀態管理Vuex

1. 配置

   {
       state: {
           cart: localStorage.getItem('cart')
       },
       mutations:{
           addCart:(state)=>{
   
           }
       },
       getter:{},
       actions:{}
   }

2. 使用

   • commit()
   • dispatch()
   • $store.state.xx

vuex

class KVuex {
    constructor (options) {
        this.state = options.state
        this.mutations = options.mutations
        this.actions = options.actions
        // 借用vue自己的響應式的通知機制
        // state 會將須要的依賴收集在 Dep 中
        this._vm = new KVue({
            data: {
                $state: this.state
            }
        })
    }

    commit (type, payload, _options) {
        const entry = this.mutations[type]
        entry.forEach(handler=>handler(payload))
    }

    dispatch (type, payload) {
        const entry = this.actions[type]

        return entry(payload)
    }
}

github.com/vuejs/vuex

vue-router

使用

const routes = [
    { path: '/', component: Home },
    { path: '/book', component: Book },
    { path: '/movie', component: Movie }
]

const router = new VueRouter(Vue, {
    routes
})

new Vue({
    el: '#app',
    router
})

class VueRouter {
    constructor(Vue, options) {
        this.$options = options
        this.routeMap = {}
        this.app = new Vue({
            data: {
                current: '#/'
            }
        })

        this.init()
        this.createRouteMap(this.$options)
        this.initComponent(Vue)
    }

    // 初始化 hashchange
    init() {
        window.addEventListener('load', this.onHashChange.bind(this), false)
        window.addEventListener('hashchange', this.onHashChange.bind(this), false)
    }

    createRouteMap(options) {
        options.routes.forEach(item => {
            this.routeMap[item.path] = item.component
        })
    }

    // 註冊組件
    initComponent(Vue) {
        Vue.component('router-link', {
            props: {
                to: String
            },
            template: '<a :href="to"><slot></slot></a>'
        })

        const _this = this
        Vue.component('router-view', {
            render(h) {
                var component = _this.routeMap[_this.app.current]
                return h(component)
            }
        })
    }

    // 獲取當前 hash 串
    getHash() {
        return window.location.hash.slice(1) || '/'
    }

    // 設置當前路徑
    onHashChange() {
        this.app.current = this.getHash()
    }
}