vuex的基础学习

vuex

概念：专门在vue中实现集中式状态管理的一个vue插件，对多个组件的共享状态进行集中式管理的。

一个状态需要被共享就可以用vuex

看这张图（一定要细致，细致之后的学习会很舒服）

1. 首先，在组件里面调用dispatch接口，传参（进行的操作，和什么数值操作）

2. vuex的actions里面有一个键值对，是有关这个操作的函数（函数里面需要手动调用commit接口）

3. 在mutations里面有个键值对是用来根据要做的操作修改state中的值

4. 最终渲染到页面

actions真正的作用是如果要进行的操作需要向服务器端获取数值，就可以在这个actions中发送ajax请求获取这个数值

若知道操作和数值，可以直接在组件调用commit接口去直接到达mutations

图中没有展现的是actions，mutations，state都是需要store进行管理的，也就是调用接口需要store.dispatch

vuex的初始配置

1. 安装插件

2. Vue.use（只有使用了，vue传入store配置vue才认）

3. 创建store（需要传入配置项）

4. vm传入store配置项

vuex的使用

• 把共享数据放入state中

• 插值语法可直接访问到$store，可以拿到state中的值

• dispatch中第一个参数是进行的操作，写在组件的函数中

• commit中第一个参数是大写的操作，显得牛逼，写在actions中的操作函数中

• 小写的操作函数中第一个参数是context，大写的操作函数第一个参数是state

再度完善，写的更规范些：

• 有业务逻辑，把业务逻辑放在actions中

• 无业务逻辑，且已知数值，直接在组件的方法中调用commit接口

另外记一个store中的配置项，getters，和计算属性类似，也是靠return拿到值，（函数参数是state）

Vuex精简代码

1. 借助vuex中的mapState，mapGetters去映射state，getters，

• 传入对象（改名用这个，注意值为字符串）

• 传入数组（简写用这个）

  

1. 借助vuex中的mapMutations，mapActions去生成对应的方法，前者方法中会调用commit与mutations对话，后者方法中会调用dispatch与actions对话

传入对象{函数名：'操作大写'}

备注：需要注意模板中绑定事件需要传入要与什么数值操作，否则就是传入event

Vuex模块化+命名空间

Q:要管理的共享数据会非常多，导致mutations等等配置特别臃肿，且不适合维护，那应该怎么办呐？

A:将这些配置按与实现什么业务相关进行分类

1. 模块化之后怎么在组件中简写形式拿到数据呐？

就需要用到namespaced配置并且在四个map...中的第一个参数指定是模块化之后的哪一个

总结：(学了将近1小时,又看视频又敲代码,就学这么点东西,就是因为创建正确的联系,如果在听的时候不那么注重细节,而把重点放在老师要讲的联系上,会不会更好)

• 在不同的业务逻辑下将store模块化

• 开启namespaced并且map...中第一个参数指定是哪一个模块

1. 若不采用简写形式呐?(也就是自己去从state,getters中拿值,自己调用dispatch,commit)

拿state中的值时需要指定是哪一个模块

拿getters中的值时不用指定哪一个模块,用getters[countAbout/firstname]

dispatch和commit传递第一个参数时都要用在操作名前面拼接'模块/'

vuex的规范:

src写一个store文件,里面根据业务区分出来不同的store,然后暴露出去,在index中引入并写入modules中

真的容易忘,虽然一天学完了,但是过了几天之后发现真的生疏,非常多的之前建立的联系都i想不起来了,很耗费脑子.看来还是要尽可能快的学完,然后重在做项目实践.