状态管理Vuex

时间:2019-03-15
本文章向大家介绍状态管理Vuex,主要包括状态管理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)
    }
}

https://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()
    }
}

上一页 下一页

原文地址:http://www.manongjc.com/article/73077.html