状态管理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)
}
}
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()
}
}
状态管理Vuex的更多相关文章
- Vue状态管理vuex
前面的话 由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue提供了vuex.本文将详细介绍Vue状态管理vuex 引入 当访问数据对象时,一个 V ...
- Vue之状态管理(vuex)与接口调用
Vue之状态管理(vuex)与接口调用 一,介绍与需求 1.1,介绍 1,状态管理(vuex) Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态 ...
- Vue.js 2.x笔记:状态管理Vuex(7)
1. Vuex简介与安装 1.1 Vuex简介 Vuex是为vue.js应用程序开发的状态管理模式,解决的问题: ◊ 组件之间的传参,多层嵌套组件之间的传参以及各组件之间耦合度过高问题 ◊ 不同状态中 ...
- vue创建状态管理(vuex的store机制)
1:为什么说要是永远状态管理 在使用 Vue 框架做单页面应用时,我们时常会遇到传值,组件公用状态的问题.(子父间传值文章传送门) ,如果是简单的应用,兄弟组件之间通信还能使用 eventBus 来作 ...
- Vue-认识状态管理vuex
vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试,可以多个组件共享状态.简单来说,就是共享的状态用state来存放,用mutations来操作state,但是 ...
- vue总结 08状态管理vuex
状态管理 类 Flux 状态管理的官方实现 由于状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue 提供 vuex:我们有受到 Elm 启发的状态管 ...
- 状态管理(Vuex、 Flux、Redux、The Elm Architecture)
1.https://vuex.vuejs.org/zh-cn/intro.html (vuex) 这就是 Vuex 背后的基本思想,借鉴了 Flux.Redux.和 The Elm Architect ...
- vue中状态管理vuex的使用分享
一.main.js中引入 store import store from './store' window.HMO_APP = new Vue({ router, store, render: h = ...
- Vue学习日记(四)——Vue状态管理vuex
前言 先说句前话,如果不是接触大型项目,不需要有多个子页面,不使用vuex也是完全可以的. 说实在话,我在阅读vuex文档的时候,也很难以去理解vuex,甚至觉得没有使用它我也可以.但是直到我在项目碰 ...
随机推荐
- Hadoop-1.2.1伪分布下 hive-0.10.0内嵌模式安装
Hadoop-1.2.1伪分布下 hive-0.10.0内嵌模式安装 1.下载hive-0.10.0 网址是:http://archive.apache.org/dist/hive/hive-0.10 ...
- CUDA cufftPlanMany的用法_31通道32*8像素的FFT
#include <cufft.h> #include <iostream> #include <cuda_runtime.h> #include <help ...
- 修改vsftpd的默认根目录
修改ftp的根目录只要修改/etc/vsftpd/vsftpd.conf文件即可: 加入如下几行: local_root=/var/www/html chroot_local_user=YES ano ...
- .Net下EF的简单实现
1.连接SQLServer,创建数据库TestDB; 2.添加EF引用,点击工具-NuGet包管理器-管理解决方案的NuGet程序包, 搜索EntityFramework包,点击安装: 3.在Web. ...
- jquery banner 轮播配置方法
1 概述 Banner可以作为网站页面的横幅广告,也可以作为游行活动时用的旗帜,还可以是报纸杂志上的大标题.Banner主要体现中心意旨,形象鲜明表达最主要的情感思想或宣传中心.在以往很多项目中主要体 ...
- ssh远程连接不上linux
远程连接工具是:Xmanager Enterprise 5-->Xshell linux 发行版本是:CentOS-6.3-x86_64 问题:ssh一直都可以远程连接上linux,一段时间后突 ...
- spring boot 中使用LUA脚本
编写LUA脚本 该脚本功能:先检查redis中某个key的值是否与期望的值V1一致,如果一致则将其修改为新的值V2并返回true,否则返回false.其实就是CAS. local current = ...
- Spring Boot中使用JdbcTemplate访问数据库
本文介绍在Spring Boot基础下配置数据源和通过JdbcTemplate编写数据访问的示例. 数据源配置 在我们访问数据库的时候,需要先配置一个数据源,下面分别介绍一下几种不同的数据库配置方式. ...
- C#导出HTML到PDF组件 Pechkin
C#导出PDF功能是开发中经常遇到的功能,我们采用第三方的组件,比如 iTextSharp, aspose等,还能搜到一些开源的类库, 但是对于一些内容复杂样式丰富的PDF,我们希望通过传入一个URL ...
- servlet实现商品商场项目
1.1 1.创建四个包DButils reposiable service servletJPK DButils包中的类jdbcutils.java 用于获取工具类DButils工具类的DataSou ...