第十九节
一、Vuex
1.1Vuex是什么？
Vuex是实现组件全局状态(数据)管理的一种机制，可以方便实现组件之间的数据共享；
1.2状态管理？
状态： 就是Vue组件中data里面的属性，我们也将叫做数据。
管理： 就是对于项目中数据的操作管理。
1.3管理什么状态呢？
用户的登录状态、地理位置信息、商品的收藏、购物车的物品；
二、单界面状态管理
2.1具体实现
三、多界面状态管理
当我们的应用遇到多个组件共享状态的时候，单向数据流的简洁性很容易被破坏；
多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态。
3.1安装Vuex
新建store文件夹===>index.js
//1.引入Vue
import Vue from 'vue';
import Vuex from 'vuex';
//2.安装
Vue.use(Vuex);
const store = new Vuex.Store({
//存储状态
state:{
//自定义共享状态
count:0,
},
// Vuex中的Store状态（state）更新的唯一方式：提交Mutation
mutations:{//定义mutations
add(state){ //第一个参数就是state
// this是store对象
// console.log(this)
state.count++
},
}
})
//导出
export default store3.2main.js
来到main.js中，导入store对象，并且放在new Vue中
就可以通过this.$store的方式获取到这个store对象3.3使用vuex中count(state中定义的共享状态)
this.$store.state.count
不能直接修改store中的状态，直接修改devtools侦听不到数据的修改。
3.4mutations 负责同步修改状态
Vuex的store修改状态唯一的方式：提交mutations
mutations:{ //定义mutations
add(state){ //第一个参数就是state
// this是store对象
// console.log(this)
state.count++
}
}
在组件中进行提交mutations
this.$store.commit("add")四、mutation的提交方式与mutation的携带参数
第二十节
一、state
state属性是vuex管理的状态对象，里面会包含一些具体的状态，也即通用的数据；
二、Mutation
更改Vuex的store中的状态的唯一方法是提交mutation;
2.1Mutation携带参数
你可以向store.commit传入额外的参数，即mutation的载荷payload;
2.2Mutation提交风格
2.3Mutation注意事项
既然Vuex的store中的状态是响应式的，那么当我们变更状态时，监视状态的Vue组件也会自动更新。这也意味着Vuex需要遵守一些注意事项：
（1）最好提前在你的store中初始化好所有所需属性；
（2）当需要在对象上添加新属性时，你应该使用Vue.set(obj,‘newProp’,123)或者
三、Actions
Action类似于Mutation,不同的是：
1、Action提交的是mutation，而不是直接变更状态；
2、Action可以包含任意异步操作。在Vuex的使用过程中，我们可以将多个Mutation合并到一个Action中，也可以通过Action进行异步操作；
3.1actions基础用法
Action函数接收一个与store实例具有相同方法和属性的context对象，因此你可以调用context.commit提交一个mutation，或者通过context.state和context.getters来获取state和getters.Actions通过store.dispatch方法触发；
3.2携带参数与提交方式
Actions支持同样的载荷方式和对象方法进行分拨：
四、getters
4.1Getters Store中的计算属性
// 计算count的平方
quadratic(state){
// 第一个参数，状态state
return state.count*state.count
},4.2筛选数据
//筛选数据
filterInfo(state){
//age返回的不是一个不确定的值,而是一个函数
return (age) => {
return state.info.filter(res => res.age > age)
}
},4.3获取数据
4.4getters中的两个参数
第二十一节
一、Vuex辅助函数
vuex提供了四个铺筑函数，分别是mapState、mapGetters、mapMutations、mapActions.在Vuex中获取数据的辅助函数有两个mapState、mapGetters，操作Mutation和actionhas函数mapMutations、mapActions.
1.1mapState
首先引入 import {mapState} from 'vuex'
(一)普通使用
computed:mapState([//普通使用
//属性名与vuex状态名相同 可使用数组的形式写
"count",//将vuex中状态count映射到计算属性中(this.$store.count)
"user"
])(二)对象的形式使用
//以对象的形式使用
// computed:mapState({
// cuser(state){
// //通过计算属性的第一个函数 是vuex中的状态state，所以可以通过state直接获取数据
// return state.user
// },
// //简写方式
// csuser:state => state.user,
// cnum:"count"
// })
computed:{
//组件自己的计算属性
cPrice(){
return "$" + this.price
},
//使用对象展开运算符...解构
...mapState({
cuser(state){
//通过计算属性的第一个函数 是vuex中的状态state，所以可以通过state直接获取数据
return state.user
},
//简写方式
csuser:state => state.user,
cnum:"count"
})
}1.2mapGetters
mapGetters辅助函数仅仅是将store中的getter映射到局部计算属性
1.3mapMutations
mapMutations其实跟mapState、mapGetters的作用是类似的,将组件中的methods映射到store.commit调用
1.4mapActions
你在组件中使用this.$store.dispatch(‘xxx’)分发ation,或者使用mapActions辅助函数将组件的methods映射为store.dispatch调用
二、Modules
