由于官网贵vuex的分析过于官方,所以在这里,分析一下个人对vuex的使用的一些心得。
一:vuex是一个采用集中式管理,应用的所有组件的状态,并且以相应的保存规则状态以一种可预测的方式发生变化。
二:vuex的页集到vue的官方调试工具还是devtools extension。
1. 安装devtools extension调试插件的两种方式:
1.1 可以根据官方网站提供的地址下载 devtools extension到本地,放在一个不常动的文件以后,打开chrome浏览器,点击更多里面的扩展程序,选择已经解压的扩展程序
1.2 第二种方式,如果可以打开chrome的商店,直接搜索devtools 会搜到对应的程序直接点击添加到扩展程序既可。
1.3为什么在开始vuex之前先讲一下如何安装这个扩展程序,这是因为在vuex里面的可以使用devtools对vuex里面的一些数据的变化及时的呈现和方便调试。
三:vuex的几个核心概念:
1.state:(单一状态树)
就是用来放状态相关的信息(如果用过vue的话,可以理解是跟vue里面的data有些相似)
单一状态树:(单一数据源)
2.Getters(可以理解为类似于组件内的计算属性)
组件内在使Getters里面的计算属性的时候
this.$store.getters.'方法名称'
3.Mutation:(这个里面是用来修改state里面的数据,可以理解成组件内的methods,注意,这个里面不能执行异步操作)
组件内触发该对象的时候,使用 this.$store.commit( ' 方法名称 ',参数 ),第一个参数是Mutation里面的方法名称,第二个参数一般是参数,可选
mutation主要包含两部分:
1>字符串时间类型(type)
2>一个回调函数(handler),该回调函数的第一个参数就是state;
例如:
state:{
count:0
},
mutation:{
increment(state){
state.count++
}
}
组件内创建一个button按钮的点击事件
add:function(){
this.$store.commit('increment')// 这样就完成对vuex里面的数据操作,如果有参数 直接在后面添加参数既可
}
特殊形式:
commit里面可以传一个对象
this.$store.comit({
type:'count',//mutation里面的方法名
count //参数
})
mutation的响应规则:
1>vuex的store中的state是响应式的,当state中的数据发生变化的时候,vue会自动更新
2>必须遵守一些vuex的对应的规则:
2.1>提前在store中额的初始化所需要的属性:
2.2>当给state中的对象添加新属性的时候,需要使用下面的方式:
使用 Vue.set('新属性',值)或者是使用新对象给就对象重新赋值
注意:如果使用 state.age=123;这个时候,界面是不会刷新的
mutation常量的类型-概念:
可以单独创建一个js文件,里面定义一些变量用来保存vuex的mutation里面的数据的变化
mutation是同步函数:
通常情况下,vuex中我们使用的mutation中的方法必须是同步的
》主要原因是因为我们使用devtools的是偶,devtools可以帮助我们捕捉mutation的快照
》但是如果异步操作,那么devtools将不能很好的追踪这个操作是什么完成的
4.action(异步操作的数据,这个里面来触发mutation里面的方法,专用于异步处理)
组件内触发的形式
Module:(模块划分)
module是模块的意思:
1.vue使用单一状态树,也就是意味着很多状态都会交给vuex来管理
2.当应用变得非常复杂的时候,store对象就有可能变得臃肿
3.为了解决这个问题,vuex允许我们将store分割成模块(module),模块拥有自己的state,mutation,action,getters等