vuex是什么

vuex的基本使用【重要】_模块化

全局数据总线

vuex的基本使用【重要】_模块化_02


vuex的基本使用【重要】_共享数据_03

vuex

vuex专门解决共享数据的问题。

vuex的基本使用【重要】_vue.js_04

什么时候使用vuex

多组件需要共享数据,只保存一份,需要修改的时候,所有组件的数据都能同步更新。

vuex的基本使用【重要】_共享数据_05

vuex工作原理图

vuex的基本使用【重要】_业务逻辑_06


vuex的基本使用【重要】_模块化_07

vuex的基本使用【重要】_共享数据_08

搭建vuex的开发环境

vuex的基本使用【重要】_前端_09


vuex的基本使用【重要】_vue.js_10


vuex的基本使用【重要】_前端_11


vuex的基本使用【重要】_前端_12


在main.js中引入和使用

vuex的基本使用【重要】_业务逻辑_13


use以后,创建vm的时候就可以使用store的配置项。vm和vc中我们都可以看到$store。

vuex的基本使用【重要】_模块化_14


创建文件。

vuex的基本使用【重要】_前端_15


src/store/index.js

vuex的基本使用【重要】_共享数据_16


vuex的基本使用【重要】_共享数据_17


vuex的基本使用【重要】_vue.js_18


main.js

vuex的基本使用【重要】_模块化_19


vuex的基本使用【重要】_vue.js_20


vuex的基本使用【重要】_模块化_21

main.js在执行的时候,会扫描所有的import的文件,然后汇总到最上方,先执行这些文件。因此在main.js中引入vuex是不行的。

vuex的基本使用【重要】_共享数据_22


vuex的基本使用【重要】_业务逻辑_23

总结

vuex的基本使用【重要】_vue.js_24


vuex的基本使用【重要】_vue.js_25


vuex的基本使用【重要】_前端_26

使用步骤

vuex的基本使用【重要】_共享数据_27


vuex的基本使用【重要】_模块化_28


vuex的基本使用【重要】_模块化_29


vuex的基本使用【重要】_前端_30


vuex的基本使用【重要】_业务逻辑_31


将业务逻辑写在store里面。

vuex的基本使用【重要】_前端_32


不需要处理业务逻辑直接使用commit。

vuex的基本使用【重要】_业务逻辑_33


vuex的基本使用【重要】_模块化_34

vuex的基本使用

vuex的基本使用【重要】_业务逻辑_35


vuex的基本使用【重要】_vue.js_36

getters

vuex的基本使用【重要】_vue.js_37


vuex的基本使用【重要】_模块化_38


写成计算属性,简化页面的模板代码。

vuex的基本使用【重要】_共享数据_39


vuex的基本使用【重要】_前端_40

mapstate

vuex的基本使用【重要】_模块化_41


vuex的基本使用【重要】_前端_42


vuex的基本使用【重要】_业务逻辑_43


对象写法:

vuex的基本使用【重要】_前端_44


数组写法:

vuex的基本使用【重要】_业务逻辑_45


vuex的基本使用【重要】_共享数据_46


vuex的基本使用【重要】_共享数据_47

map方法

vuex的基本使用【重要】_共享数据_48


vuex的基本使用【重要】_vue.js_49

vuex的基本使用【重要】_模块化_50


vuex的基本使用【重要】_业务逻辑_51

vuex的基本使用【重要】_vue.js_52


vuex的基本使用【重要】_业务逻辑_53


生成唯一id的方法。

vuex的基本使用【重要】_前端_54

vuex的模块化编码

配置放在不同的对象中

vuex的基本使用【重要】_业务逻辑_55


vuex的基本使用【重要】_模块化_56


对象的简写形式:

vuex的基本使用【重要】_vue.js_57


必须配置命名空间。

vuex的基本使用【重要】_模块化_58


确定联系的是哪个模块的。

vuex的基本使用【重要】_前端_59


vuex的基本使用【重要】_共享数据_60


自己写,没有使用map的情况。

vuex的基本使用【重要】_vue.js_61


模块化编码和命名空间相互配合,解决命名冲突的问题。还可以拆分文件。

vuex的基本使用【重要】_共享数据_62


引入。

vuex的基本使用【重要】_前端_63

总结

vuex的基本使用【重要】_共享数据_64


vuex的基本使用【重要】_vue.js_65