由于官网贵vuex的分析过于官方,所以在这里,分析一下个人对vuex的使用的一些心得。

一:vuex是一个采用集中式管理,应用的所有组件的状态,并且以相应的保存规则状态以一种可预测的方式发生变化。

二:vuex的页集到vue的官方调试工具还是devtools extension。

1. 安装devtools extension调试插件的两种方式:

1.1 可以根据官方网站提供的地址下载 devtools extension到本地,放在一个不常动的文件以后,打开chrome浏览器,点击更多里面的扩展程序,选择已经解压的扩展程序

vuex分析

1.2 第二种方式,如果可以打开chrome的商店,直接搜索devtools   会搜到对应的程序直接点击添加到扩展程序既可。

1.3为什么在开始vuex之前先讲一下如何安装这个扩展程序,这是因为在vuex里面的可以使用devtools对vuex里面的一些数据的变化及时的呈现和方便调试。

三:vuex的几个核心概念:

1.state:(单一状态树)

就是用来放状态相关的信息(如果用过vue的话,可以理解是跟vue里面的data有些相似)

单一状态树:(单一数据源)

2.Getters(可以理解为类似于组件内的计算属性)

组件内在使Getters里面的计算属性的时候

this.$store.getters.'方法名称'

vuex分析

vuex分析

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里面的方法,专用于异步处理)

vuex分析

组件内触发的形式

vuex分析

vuex分析

Module:(模块划分)

module是模块的意思:

1.vue使用单一状态树,也就是意味着很多状态都会交给vuex来管理

2.当应用变得非常复杂的时候,store对象就有可能变得臃肿

3.为了解决这个问题,vuex允许我们将store分割成模块(module),模块拥有自己的state,mutation,action,getters等

 

 

 

 

相关文章:

  • 2021-10-02
  • 2021-08-05
  • 2022-12-23
  • 2021-07-15
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-05-27
  • 2021-09-29
  • 2022-12-23
  • 2021-12-07
  • 2022-12-23
  • 2021-10-22
  • 2021-09-03
相关资源
相似解决方案