Vuex核心概念

Vuex有几个比较核心的概念:
State
Getters
Mutation
Action
Module

State单一状态树

如果你的状态信息是保存到多个Store对象中的，那么之后的管理和维护等等都会变得特别困难。
所以Vuex也使用了单一状态树来管理应用层级的全部状态。
单一状态树能够让我们最直接的方式找到某个状态的片段，而且在之后的维护和调试过程中，也可以非常方便的管理和维护。

Getters

我们需要从store中获取一些state变异后的状态，相当于计算属性computed

例：state：{count:10}

我们组件需要获取的count的平方该怎么做

如果直接在组件中使用计算属性computed 是可以的，但是如果另一个组件也需要平方的话也得自己定义一个计算属性，这样增加重复工作，所以就在getters中计算好，组件直接调用即可。

getters:{ getcount(state){ return state.count*state.count}}

组件使用：{{this.$store.getters.getcount}}

再来实现几个复杂点的例子

在state中 添加user:[ {id:1,age:19},{id:1,age:28},{id:1,age:20},{id:1,age:10}]

组件要获取大于18岁的该怎么做

同样的我们还是在getters中定义moreAge(state){return state.use.filter(s=>s.age>18)}//fifter表示过滤

组件中同样使用即可

那我们想获得大于18岁的个数呢？

我们可以再定义一个getters，moreAgecount(state,getters){return getters.morAge.length}

如果组件想通过自己来决定显示大于多少岁的信息改怎么做呢？

mymoreAge(state){ return function (age) {return state.use.filter(s=>s.age>age) }}

为什么不直接在mymoreAge括号中带age不定参数呢，因为getters默认不能传参数的，就算你在括号中带age参数，那么age参数也会被默认为getters，所以需要带参只能让getters本身返回一个函数

Mutation

mutation是store状态更改的唯一方式

主要俩部分

1.字符串的事件类型（type）
2.一个回调函数（handler）,该回调函数的第一个参数就是state。

例如要更改state中的count，组件中button按钮点击触发单击事件让count++

mutation中写 increment(state){state.count++ }

组件中使用单击方法为 Addcount(){this.$store.commit('increment')}  //commit来调用mutation中的方法

再来个例子带参数

组件自定义按钮点击count+几

自定义加多少那么button的方法肯定要带参数 Addcount(num){this.$store.commit('mutcount',num)}//带参数方法后跟逗号后跟参数

 mutation方法定义：mutcount(state,num){state.count+=num }，button中@click=“Addcount（数值）”这样就可以实现了。

这里要说一下mutation的另一种提交风格

第一种 this.$store.commit('mutcount',num)

第二种 this.$store.commit({ type:'mutcount', count }) //这里 的type代表事件类型, count返回的不是一个数值，而是整个对象，针对这种现象，mutation中的方法要改变一下 mutcount(state,payload){state.count+=payload.count }//payload是负载的意思，比如要传递多个参数，就可以用payload

Mutation响应规则

Vuex的store中的state是响应式的, 当state中的数据发生改变时, Vue组件会自动更新.

state中的属性都会被加入到响应式系统中，而响应式系统会监听属性的变化，当属性发生变化时，会通知所有界面中用到刻属性的地方，让界面刷新

这就要求我们必须遵守一些Vuex对应的规则:
提前在store中初始化好所需的属性.
当给state中的对象添加新属性时, 使用下面的方式:
方式一: Vu使用e.set(obj, 'newProp', 123)
方式二: 用心对象给旧对象重新赋值

 Action

我们强调, 不要再Mutation中进行异步操作.
但是某些情况, 我们确实希望在Vuex中进行一些异步操作, 比如网络请求, 必然是异步的. 这个时候怎么处理呢?
Action类似于Mutation, 但是是用来代替Mutation进行异步操作的.

格式：mutation方法 mutcount（state） ，在action中定义方法 mutcount（context）{ context.commit('mutcount')}//action中参数context是和store对象具有相同方法和属性的对象.也就是说, 我们可以通过context去进行commit相关的操作, 也可以获取context.state等.

在组件中 this.$store.dispatch('mutcount')  //调用Action用dispatch

Module

Module是模块的意思, 为什么在Vuex中我们要使用模块呢?
Vue使用单一状态树,那么也意味着很多状态都会交给Vuex来管理.
当应用变得非常复杂时,store对象就有可能变得相当臃肿.
为了解决这个问题, Vuex允许我们将store分割成模块(Module), 而每个模块拥有自己的state、mutation、action、getters等

例图

 

 组件中想使用a模块中的state格式如下{{$store.state.a.name}}调用a模块中的mutation还是直接在对应的方法中this.$store.commit('mutation')

模块a中方法想使用根Vuex中的state，可以在参数中带rootState，通过rootState能点出来根Vuex中的stare中的内容

项目结构

为了保证index.js中不那么乱，代码方便管理，官方推荐我们把部分代码抽离出去