路由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()
}
}

状态管理Vuex的更多相关文章

  1. Vue状态管理vuex

    前面的话 由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue提供了vuex.本文将详细介绍Vue状态管理vuex 引入 当访问数据对象时,一个 V ...

  2. Vue之状态管理(vuex)与接口调用

    Vue之状态管理(vuex)与接口调用 一,介绍与需求 1.1,介绍 1,状态管理(vuex) Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态 ...

  3. Vue.js 2.x笔记:状态管理Vuex(7)

    1. Vuex简介与安装 1.1 Vuex简介 Vuex是为vue.js应用程序开发的状态管理模式,解决的问题: ◊ 组件之间的传参,多层嵌套组件之间的传参以及各组件之间耦合度过高问题 ◊ 不同状态中 ...

  4. vue创建状态管理(vuex的store机制)

    1:为什么说要是永远状态管理 在使用 Vue 框架做单页面应用时,我们时常会遇到传值,组件公用状态的问题.(子父间传值文章传送门) ,如果是简单的应用,兄弟组件之间通信还能使用 eventBus 来作 ...

  5. Vue-认识状态管理vuex

    vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试,可以多个组件共享状态.简单来说,就是共享的状态用state来存放,用mutations来操作state,但是 ...

  6. vue总结 08状态管理vuex

      状态管理 类 Flux 状态管理的官方实现 由于状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue 提供 vuex:我们有受到 Elm 启发的状态管 ...

  7. 状态管理(Vuex、 Flux、Redux、The Elm Architecture)

    1.https://vuex.vuejs.org/zh-cn/intro.html (vuex) 这就是 Vuex 背后的基本思想,借鉴了 Flux.Redux.和 The Elm Architect ...

  8. vue中状态管理vuex的使用分享

    一.main.js中引入 store import store from './store' window.HMO_APP = new Vue({ router, store, render: h = ...

  9. Vue学习日记(四)——Vue状态管理vuex

    前言 先说句前话,如果不是接触大型项目,不需要有多个子页面,不使用vuex也是完全可以的. 说实在话,我在阅读vuex文档的时候,也很难以去理解vuex,甚至觉得没有使用它我也可以.但是直到我在项目碰 ...

随机推荐

  1. 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 ...

  2. CUDA cufftPlanMany的用法_31通道32*8像素的FFT

    #include <cufft.h> #include <iostream> #include <cuda_runtime.h> #include <help ...

  3. 修改vsftpd的默认根目录

    修改ftp的根目录只要修改/etc/vsftpd/vsftpd.conf文件即可: 加入如下几行: local_root=/var/www/html chroot_local_user=YES ano ...

  4. .Net下EF的简单实现

    1.连接SQLServer,创建数据库TestDB; 2.添加EF引用,点击工具-NuGet包管理器-管理解决方案的NuGet程序包, 搜索EntityFramework包,点击安装: 3.在Web. ...

  5. jquery banner 轮播配置方法

    1 概述 Banner可以作为网站页面的横幅广告,也可以作为游行活动时用的旗帜,还可以是报纸杂志上的大标题.Banner主要体现中心意旨,形象鲜明表达最主要的情感思想或宣传中心.在以往很多项目中主要体 ...

  6. ssh远程连接不上linux

    远程连接工具是:Xmanager Enterprise 5-->Xshell linux 发行版本是:CentOS-6.3-x86_64 问题:ssh一直都可以远程连接上linux,一段时间后突 ...

  7. spring boot 中使用LUA脚本

    编写LUA脚本 该脚本功能:先检查redis中某个key的值是否与期望的值V1一致,如果一致则将其修改为新的值V2并返回true,否则返回false.其实就是CAS. local current = ...

  8. Spring Boot中使用JdbcTemplate访问数据库

    本文介绍在Spring Boot基础下配置数据源和通过JdbcTemplate编写数据访问的示例. 数据源配置 在我们访问数据库的时候,需要先配置一个数据源,下面分别介绍一下几种不同的数据库配置方式. ...

  9. C#导出HTML到PDF组件 Pechkin

    C#导出PDF功能是开发中经常遇到的功能,我们采用第三方的组件,比如 iTextSharp, aspose等,还能搜到一些开源的类库, 但是对于一些内容复杂样式丰富的PDF,我们希望通过传入一个URL ...

  10. servlet实现商品商场项目

    1.1 1.创建四个包DButils reposiable service servletJPK DButils包中的类jdbcutils.java 用于获取工具类DButils工具类的DataSou ...