Vuex是什么
1.公共状态管理;解决多个非父子组件传值麻烦的问题;简单说就是多个页面都能用Vuex中store公共的数据
1.并不是所有的数据都要放在Vuex中,只有各个组件公用的一些数据会放在Vuex当中
2.Vuex是一个公共状态管理模式 并不是数据库 所以不可能持久保存一些数据
当用户刷新浏览器的时候那么数据就有可能消失
3.Vuex主要应用在大型的单页面开发中
2.vuex的特点
1.遵循单向数据流
2.Vuex中的数据是响应式的
3.vuex的流程图
vuex 的几个核心属性:
Vuex 使用一个 Store 对象管理应用的状态,一个 Store 包括 State, Getters, Mutations, Actions Modules五个属性。
State:State 意为“状态”,是 vuex 状态管理的数据源。
Getters:从基本数据(state)派生的数据,相当于state的计算属性
Mutations:Mutaion 是 vuex 中改变 State 的唯一途径(严格模式下),并且只能是同步操作。Mutaion 使得状态变得可追踪,配合一些 devtools 可以实现 time-travel 的调试体验。
Actions:一些对 State 的异步操作可以放在 Action 中,并通过在 Action 提交 Mutaion 变更状态。
Modules:
1.每个模块都相当于一个小型的Vuex
2.每个模块里面都会有state getters actions mutations
3.切记在导出模块的时候 加一个 namespaced:true 主要的作用是将每个模块都有独立命名空间
独立命名空间
namespace:true
在多人协作开发的时候,由于个人单词量有限,可能子模块和主模块中的函数名字会相同,这样嗲用函数的时候,相同名字
的函数都会被调用,就会发生问题。
为了解决这个问题,上面提到了导出模块的时候要加namespace:true.
那么怎么调用子模块中的函数呢?假如我的子模块名字为todo.js。 函数名字就改成todo/函数名字。
methods: { ...mapMutations(['tips'])}
vuex辅助函数
如果想要访问vuex.store中state中的数据,需要this.$store.state.属性名。显然这样访问数据写的代码很很不简洁的,辅助函数就是用来解决这个问题的。
1、辅助函数:
通过辅助函数mapState、mapActions、mapMutations,把vuex.store中的属性映射到vue实例身上,这样在vue实例中就能访问vuex.store中的属性了,对于操作vuex.store就很方便了。
state辅助函数为mapState,actions辅助函数为mapActions,mutations辅助函数为mapMutations。(Vuex实例身上有mapState、mapActions、mapMutations属性,属性值都是函数)
2、如何使用辅助函数
在当前组件中引入Vuex
通过Vuex来调用辅助函数
3、辅助函数如何去映射vuex.store中的属性
mapState:把state属性映射到computed身上
computed:{
...Vuex.mapState({
input:state=>state.inputVal,
n:state=>state.n
})
}