1.vuex作用:它是一个管理数据的一个东西,可以系统的管理数据.好处是每个组件都可以读取和修改这个数据.相对于全局事件总线(2个组件进行互相单向读书传递数据如果修改就要写2遍很麻烦)来讲比较方便. 可以这么理解其等于全局事件总线➕数据代理get set 方法
2.vuex引入:npm i vuex(tips:注意vue与vuex的版本问题下载的时候)
3.vuex流程图:
解释:
注意这边dispatch方法,commit方法都是在$store对象中,vuex里面有个store对象,因此必须先倒入vuex和vue,让vue可以使用到vuex插件即vue.use(vuex).之后创建store的实例对象,new vuex.store({})里面放上其上3个对象数据.
对象里面包含着Action异步调用,mutation可以修改state的属性,state里面用来存储数据
一般一个组件定义一个按钮回调函数如果其是同步传递数据可以直接commit(函数名,传递的数据)给到mutations去进行改变数据,如果是异步则需要先dispatch(函数名,数据)递给Action进行操作异步处理,再由action去进行commit给mutations进行数据变化改变.其三都是对象形式
总结理解:可以这么理解如果有筛选业务或者异步获取需要数据要先到action在给mutations处理数据.如果没有业务只是进行当前同步传值直接commit给mutations对象.最后数据的变化形式由mutation来进行处理相当于计算属性变化数据,而action相当于方法传递筛选需要数据.
最后states与vc实例对象进行数据同步处理改变数据.
4.action对象中每个对象函数(context,value),context相当于小型的store对象,里面有dispatch,commit方法.value代表传递的值
mutation对象中函数(state,value),state就是存储在state对象的数据,value为传递进来的数据.准备进行加工
state的数据经过mutations修改后就可以放在组件身上,注意vm的实例对象中要导入其store数据