嗯、vuex是有官网的：https://vuex.vuejs.org/zh/
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
使用Vuex：
（先再根目录下建一个文件夹store，再新建一个index.js文件）//当然这不是必然的，你也可以随便起别的名字，但推荐这样命名哈
- 安装vuex模块：npm install vuex --save
- 作为插件使用： Vue.use(Vuex)
- 定义容器： new Vuex.Store()
- 注入根实例
Vuex核心概念：
store:类容器，包含应用的大部分状态（可以理解为存储数据）
- 一个页面只能有一个store
- 状态存储是响应式的
- 不能直接改变store中的状态，唯一途径显式地提交mutations
State:包含所有应用级别状态的对象
Getters:在组件内部获取store中状态的函数
Mutations:唯一修改状态的事件回调函数
Actions:包含异步操作、提交mutation改变状态
Modules:将store分割成不同的模块
Vuex的辅助函数：mapState、mapMutations、mapActions、mapGetters
- 使用之前要先在组件中引入：import {mapState,mapMutations,mapActions,mapGetters} from 'vuex' //实际应用时，用到哪个引入哪个即可，不用的可以不引入哦
- 注意：这四个辅助函数的返回值都是对象
Vuex应用举例：
1、store的使用：
let store = new Vuex.Store({
state:{//存储状态（数据）
count:100
}
})vue组件中获得vuex状态：
由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：
在computed中：
法1：直接获取
computed:{
num(){
return this.$store.state.count
}
}法2：使用vuex的辅助函数mapState
//方法1、
computed:mapState({
num:state=>state.count
})
//方法2、
computed:mapState({
num:'count'//直接写状态中的key值
})
//方法3、
computed:mapState({
num(state){
return state.count+=100
}
})
//方法4、也可以为mapState中添加数组
computed:mapState(['count'])
//方法5、如果计算属性中有其他的值，那么就要用到扩展运算符了
computed:{
test(){
return 123
},
...mapState({//该函数的返回值是一个对象，所以需要将其扩展到computed这个对象中
count:'count'
})
}2、mutations的使用
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：
第二个参数，官方称之为mutation的载荷，即store.commit传入的额外的参数（大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的mutation会更易读）
注意：mutation必须是同步函数，所有的异步操作都在我们下面要说的actions中执行
mutations:{
addIncreate(state,payload){
state.count +=payload.add
}
}组件中应用：
法1、
methods:{
addHandle(){
//改变状态，提交mutation addIncreate
this.$store.commit({
type:"addIncreate",
add:10
})
}
}法2、使用mapMutations（和mapState用法相似，下面不再一一举例）
methods:{
...mapMutations({
addHandle:'addIncreate'
})
}想要传递参数，不能直接加在addIncreate上面，要在事件上面传参，如下所示
<input type="button" value="+"
@click="addHandle({add:10})"
/>3、Actions的使用：
Action类似于mutation，不同在于：
- Action提交的是mutation，而不是直接变更状态
- Action可以包含异步操作
看个小示例：
actions:{
addActivon(context){
setTimeout(()=>{
context.commit("addIncreate",{
n:5
})
},1000)
}
}Action函数接受一个与store示例具有相同方法和属性的context对象，所以我们可以通过context.commit提交一个mutation，实践中我们经常用到ES6中的对象解构赋值来简化的代码，所以也可以写为
actions:{
addActivon({commit}){
setTimeout(()=>{
commit("addIncreate",{
n:5
})
},1000)
}
}组件中：
methods:{
addHandle(){
this.$store.dispatch('addActivon')
}
}也可以使用辅助函数：mapActions:
methods:{
...mapActions({
addHandle:'addActivon'
})
}4、Getters的使用：
如果我们想要从state中派生出一些状态，那么此时我们就可以用到Vuex中为哦我们提供的getter了
getters可以认为是store的计算属性，就像计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算
getter接受state作为其第一参数：
let store = new Vuex.Store({
state:{
count:100
},
getters:{
changeState(state){
return state.count>=120?120:state.count
}
)}在组件中使用也很简单：
computed:{
num(){
return this.$store.state.count
},
num2(){
return this.$store.getters.changeState
}
}同样的，我们也可以使用辅助函数：mapSetters
computed:{
...mapState({
count:'count'
}),
...mapGetters({
num2:'changeState'
})
}Module：将store分割成不同的模块
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store对象就有可能变得相当臃肿，和难以分辨
为了解决这个问题，Vuex允许我们将store分割成模块。每个模块拥有自己的state、mutation、action……（和我们的选项对象拥有一样的属性）
看个简单的小示例：
let selectModule = {
state:{
//……
},
getters:{
//……
},
mutations:{
//……
},
actions:{
//……
}
}
var store = new Vuex.Store({
state:{
//……
},
getters:{
//……
},
mutations:{
//……
},
actions:{
//……
},
module:{
selectModule //此处可以写为key:value的形式，key就是模块名，如果key和value一样，就可以简写为我们的样式
}
})组件中使用也很简单，只需要加上我们的模块名即可，比如：
computed:{
num(){
return this.$store.state.selectModule.count
}
}ok，姑且整理到这里，如果想要了解更多，建议看官网哦：https://vuex.vuejs.org/zh/