状态管理Vuex
时间:2019-03-15
本文章向大家介绍状态管理Vuex,主要包括状态管理Vuex使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
路由Router
- 配置 {path:'/login',component:Login}
- 路由出口 router-view
- 传参
- {path:'/login/:id',component:Login} $route.params.id
- ?foo=aaa $route.query.foo
- 守卫
- 全局 router.beforeEach
- 路由beforeEnter
- 组件beforeRouteEnter
- 嵌套 {children:[]}
状态管理Vuex
配置
{ state: { cart: localStorage.getItem('cart') }, mutations:{ addCart:(state)=>{ } }, getter:{}, actions:{} }
使用
- 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)
}
}
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()
}
}
- 你很有想法,跟我学做菜吧No.3
- 《数据结构》 定长顺序串常用操作代码集合
- 一斤代码深入理解系列(七):微信小程序中使用微信风格样式库-WeUI
- 餐厅老板要累疯了No.2
- linux学习第十九篇:压缩介绍,gzip,bzip2,xz压缩工具
- 区块链?黑人问号?NO.1
- linux学习第二十一篇:安装软件包的三种方法,rpm,yum工具用法,yum搭建本地仓库
- iOS使用自签名证书实现HTTPS请求
- 《Java程序设计基础》 第7章手记
- linux学习第二十三篇:shell介绍,命令历史,命令补全和别名,通配符,输入输出重定向
- Python yield关键字 和 Generator(生成器)
- linux学习第二十篇:zip压缩,tar打包以及打包压缩
- 数据结构之图
- 您需要来一份82年的代理吗?No.12
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP封装的page分页类定义与用法完整示例
- Swoole实现异步投递task任务案例详解
- Keras预训练的ImageNet模型实现分类操作
- 通过实例解析Python RPC实现原理及方法
- PHP实现的支付宝支付功能示例
- 为Plesk PHP7启用Oracle OCI8扩展方法总结
- PHP模版引擎原理、定义与用法实例
- python如何查看安装了的模块
- Linux下源码包安装Swoole及基本使用操作图文详解
- python实现简易版学生成绩管理系统
- PHP中localeconv()函数的用法
- 解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
- PHP数据对象映射模式实例分析
- Pytorch 解决自定义子Module .cuda() tensor失败的问题
- PHP异常类及异常处理操作实例详解