vuex是什么?
它是组件与组件之间状态的集合.因为vue是一种单向数据流的形式,父组件使用prop传递数据给子组件,当父组件更新时,子组件的所有prop都会更新最新值,在子组件内部不应该改变prop,那子组件怎么与父组件进行通信的呢,所以vue的自定义事件系统就派上用场了.使用$on监听事件,使用$emit触发事件.但是当我们的父子组件以及兄弟组件所嵌套的层级越来深,原来组件的通信方式显得比较麻烦,由此来介绍vuex.
它像是一个全局的对象,把所有组件的状态集中在一个对象中,关联着每个组件之间通信的状态,
vuex背后的基本思想,借鉴了flux,redux,和the elm Architecture ,局别在于专门为vue.js设计的状态管理库, vue components(将state映射到视图上去)通过dispatch触发action,然后commit 一些mutation,mutate state,最后render到vue components.
开始
每一个vuex应用的核心就是store仓库,它相当于一个很大的容器,存储着每个一个state.
vuex的状态存储是响应式的,vuex组件从Store中读取状态,Store中的状态发生改变,那么相应的组件也会相应得到高效更新.
你不能直接改变Store的状态,你可以提交(commit)mutation来百变Store的状态.
核心概念
State: 单一状态树,
mapState辅助函数: 当一个组件需要获取多个状态时候,放在compute(计算属性)会显得重复和冗余.所以可以使用mapState帮助我们生成计算属性.
对象展开运算符(...mapState),mapState函数返回是一个对象,我们可以使用一个工具函数将多个对象合并为一个,将最终对象传给computed属性,实现了它与局部计算属性混合使用,对象展开运算符极大地简化写法.
Getter: 多个组件需要用此属性,个人理解为一个局部的变量,会像compute计算属性,只有当它的依赖值发生了变化才会重新计算.
mapgetters辅助函数(...mapGetters)其实和起初的对象展开运算符(...mapState)是一样的,实现了它与局部计算属性混合使用
Mutation:改变Vuex的Store中状态所必须要提交(commit)mutation.而每个mutation都有一个字符串的事件类型和一个回调函数(我们实际进行状态更改的地方)
提交载荷(不知道为啥叫做载荷),载荷是一种对象的形式
store.commit('increment',10)
mutations:{increment(state,payload) {state.count+=payload.amount}}
store.commit('increment',{amount:10})
mutation需要遵守的vue响应规则:
最好提前在你的Store初始化好所有的所需属性
以新对象替换老对象
使用常量替代 Mutation 事件类型
在组件中提交 Mutation
你可以在组件中使用this.$store.commit('xxx')提交 mutation，或者使用mapMutations辅助函数将组件中的 methods 映射为store.commit调用（需要在根节点注入store）。
Action:
在mutation中混合异步调用会导致程序很难调试,在mutation都是同步事务.
action类似于mutation,不同在于:
action提交的是mutation,而不是直接更改状态
action可以包含任意异步操作
Actions 支持同样的载荷方式和对象方式进行分发：
Module:
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象.当应用变得非常复杂时,Store对象就有可能变得相当庞大.所以允许我们将Store分割成模块,每个模块拥有自己的state,mutation,action,getter,甚至是嵌套子模块
命名空间:如果希望模块具有更高的封装度和复用性,你可以通过添加namespaced: true的方式使其成为命名空间模块
