vuex的由来:在父子组件通信中,只有父组件通过props向子组件通信,传递数据,而子组件不能向父组件传递数据。这时候就出现了vuex。vuex作为数据的管理,将共享的数据单独的列出来,做一系列操作。通过注入到根组件,全局可用。
vuex有五大核心:
state:
共享的状态(-对象形式)
getters:
为了取得state的状态,就有了getters,getters对象是为了获取state数据。
mutations:
操作state状态,也可以说是监控state数据。但是mutations只能进行同步操作, 必须是同步函数。若为异步操作,就没办法同步捕捉到state的状态。通过$store.commit()函数显示调用(PS:参数一:mutations对象中对应函数的函数名,其余参数自定义,根据操作而定) this.$store.commit('xxx') 提交 mutation
actions:
操作states状态,解决mutations没有异步的缺陷。action 提交的是 mutation,mutation直接变更状态。当某个动作触发多个mutation的时候使用action,每一个action 函数接受一个与 store 实例具有相同方法和属性的对象,比如叫做context对象,因此可以调用 context.commit 提交一个 mutation,通过 context.state 和 context.getters 来获取 state 和 getters
this.$store.dispatch('xxx') 分发 action
Mouidle:
使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割 。其实说简单一点儿就是,比如我们写一个商城,那么我们有很多数据,但不是说都一起管理,我们可以分开管理,比如购物车订单是一块数据,物品单价是一块数据,分开管理,用时引入即可,这样既方便又灵活
还有一种模块思想,就是分6个文件
state.js :在这里面定义一些组件之间的公用状态变量对象,然后export state对象
getters.js :在这里面定义一些常量变量,它的值是函数的返回值,用于获取state.js中的对象的值;或者是当做store对象的计算属性,对state.js的属性对象进行计算,得到一些计算结果的变量,export多个常量
mutation-types.js :在这里面定义一些操作mutation的字符串常量变量名,这里是定义一些动作名,所以名字一般是set 或者是update,然后再结合state.js中定义的变量对象,export多个常量
mutation.js:在这里面定义一些修改state.js中变量对象的值的方法,这些方法都放在一个常量mutations对象里面,然后export mutations
actions.js :在这里面定义一些常量方法,每个常量方法用于提交多个mutation,然后输出多个常量方法名
store.js:在这里面去引入其他5个JS文件,然后export 一个Vuex.store({})的实例对象,然后再main.js文件里面import该js文件,在Vue实例里面添加store选项,即在根节点下注册该store对象