VueX
陌上浮屠
这个作者很懒,什么都没留下…
展开
-
vuex学习一
一:npm安装cnpm install vuex --save二:Vuex是什么? 单项数据流理念示意图: 但是,当我们的应用遇到多个组件共享状态时,单项数据流的简洁性很容易遭到破坏: (1)多个视图依赖于同一个状态 (2)来自不同视图的行为需要变更同一个状态 对于问题一,传参的方法对于多次嵌套的组件将会非常繁琐,并且对于兄弟组件之间的状态传递无能为力。对于问题二,我们经常会采用父子组转载 2017-07-20 09:36:51 · 2720 阅读 · 0 评论 -
vuex学习三
state1:单一状态树:Vuex 使用 单一状态树 —— 是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个『唯一数据源(SSOT)』而存在。这也意味着,每个应用将仅仅包含一个 store 实例。 2:在 Vue 组件中获得 Vuex 状态 (1)从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态:// 创建一个 Counter 组件const Counter转载 2017-07-20 17:31:01 · 515 阅读 · 0 评论 -
vuex学习五----Mutations
1:mutation更改Vuex中的store中的状态的唯一方法是提交mutation。Vuex中的mutations非常类似于事件:每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。这个回调函数就是我们实际进行状态更改的地方,并且他会接受state作为第一个参数:const store=new Vuex.Store({ state:{转载 2017-07-24 11:59:33 · 580 阅读 · 0 评论 -
vuex学习六----actions
1:ActionsAction类似于mutation。不同在于:Action提交的是mutation,而不是直接变更状态;Action可以包含任意异步操作;const store=new Vuex.Store({ state:{ count:0 }, mutation:{ increment(state){ sta转载 2017-07-24 15:20:24 · 9115 阅读 · 2 评论 -
vuex学习七----Modules
1:Modules由于使用单一的状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂,store对象就会变得非常臃肿;为了解决这个问题,Vuex允许我们将store分隔成模块(module),每个模块拥有自己的state,mutation,action,getter,甚至是嵌套子模块const moduleA={ state:{}, mutations:{},转载 2017-07-24 18:31:49 · 12994 阅读 · 0 评论 -
vuex学习八
1:项目结构 Vuex遵守的规则:应用层级的状态应该集中带耽搁store对象中提交mutation是更改状态的唯一方法,并且这个过程是同步的异步逻辑都应该封装到action中; 2:表单处理在严格模式中使用Vuex时,在属于Vuex的state上使用v-model会抛出一个错误<input v-model='obj.message' @input='updateMessage'>//..转载 2017-07-25 13:17:32 · 520 阅读 · 0 评论 -
vuex学习四----getters
1:有时候我们需要从store中的state中派生出一些状态,例如对列表进行活了并且计数;computed:{ doneTodosCount(){ return this.$store.state.todos.filter(todo=>todo.done).length }}如果有多个组件需要用的这个属性,我们要么复制这个函数;或者抽取到一个共享函数然后再多出导入它;这2种方式都不理想转载 2017-07-24 10:59:33 · 590 阅读 · 0 评论 -
vuex学习二
四:每一个 Vuex 应用的核心就是 store(仓库)。”store” 基本上就是一个容器,它包含着你的应用中大部分的状态(state)。Vuex 和单纯的全局对象有以下两点不同:Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store中的状态发生变化,那么相应的组件也会相应地得到高效更新。你不能直接改变 store 中的状态。改变 store 中的状态转载 2017-07-20 15:05:53 · 603 阅读 · 0 评论