随笔分类 - vue
vuex-Module
摘要:Vuex 允许将 store 分割成模块(module)。 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块 //对于模块内部的 action,局部状态通过 context.state 暴露出来,根节点状态则为 context.rootState: //
阅读全文
vuex-Action(异步)
摘要:Action 类似于 mutation,不同在于: Action 提交的是 mutation,而不是直接变更状态。 Action 可以包含任意异步操作。 Action 通过 store.dispatch 方法触发 在组件中分发action 组合多个 action,以处理更加复杂的异步流程 store
阅读全文
vuex-Mutation(同步)
摘要:更改 Vuex 的 store 中的状态的唯一方法是提交 mutation.Vuex 中的 mutation 非常类似于事件: 每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。 这个回调函数就是我们实际进行状态更改的地方,并且它会接受 sta
阅读全文
vuex-getter
摘要:store 的计算属性。 getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算 在组件中接受getter mapGetters 辅助函数 mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性 //将一个 getter 属性另
阅读全文
vuex-state
摘要:Vuex 通过 store 选项,提供了一种机制将状态从根组件“注入”到每一个子组件中,且子组件能通过 this.$store访问 mapState 当一个组件需要获取多个状态时候,使用 mapState 辅助函数帮助我们生成计算属性,mapState 函数返回的是一个对象: 对象展开运算符...
阅读全文
vue全家桶(vue-cli,vue-router,vue-resource,vuex)-1
摘要:vue-router vue-resource vuex
阅读全文
vue-vuex状态管理-1
摘要:export default vuex.Store{ State, //数据库。 getters,// 是我们从数据库里取数据的 API,getters 得是一个”纯函数“ actions,//处理数据 Mutations, //把数据存入数据库的 API,用来修改state 的。 } getters: // 获取控制变量 ctrl export function g...
阅读全文
vue-router进阶-2-路由原信息
摘要://meta字段,一个路由匹配到的所有路由记录会暴露为 $route 对象(还有在导航守卫中的路有对象)的 $route.matched 数组。 const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ { ...
阅读全文
vue-router进阶-1-导航守卫
摘要:导航守卫主要用来通过跳转或取消的方式守卫导航 全局守卫,使用 router.beforeEach 注册一个全局前置守卫 const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // to: Route
阅读全文
vue-router-9-HTML5 History 模式
摘要:vue-router 默认 hash 模式,页面不会重新加载 用路由的 history 模式,利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。 需要服务端支持,服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 ind
阅读全文
vue-router-8-路由组件传参
摘要:在组件中使用$route会使之与其对应路由形成高度耦合,使用props解耦
阅读全文
vue-router-6-命名视图
摘要://展示多个视图 const router = new VueRouter({ routes: [ { path: '/', components: { default: Foo, a: Bar } } ] })
阅读全文
vue-router-5-命名路由
摘要:创建 Router 实例的时候,在 routes 配置中给某个路由设置名称
阅读全文
vue-router-4-编程式导航
摘要:想要导航到不同的 URL,用 router.push 方法,会向 history 栈添加一个新的记录 <router-link> 《==》router.push
阅读全文
vue-router-3-嵌套路由
摘要:const User = { template: ` User {{ $route.params.id }} ` } const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, children: [ ...
阅读全文
vue-router-2-动态路由配置
摘要:同一个路径可以匹配多个路由,谁先定义的,谁的优先级就最高。
阅读全文
vue-router-1-安装与基本使用
摘要:npm install vue-router import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) //使用最新的开发版 git clone https://github.com/vuejs/vue-router.git node_modules/vue-router cd node_mo...
阅读全文
浙公网安备 33010602011771号