vue全家桶之vuex

vuex
vuex的由来
vuex是一个数据共享状态管理的仓库，主要用于中大型项目中的复杂页面之间的组件传值（作者个人理解：类似于github的一种数据共享的仓库）
它是一种类似于facebook 中 Flux

vuex 的安装 和在组件中的使用
安装
在项目中使用 npm i vuex -s 进行安装
使用
首先创建一个store（仓库）的文件夹，里面新建index.js文件，或者是模块化操作
跟引入组件的方式一样的引入但是得引入vuex的文件

import store from '../store/index'
import{mapState,mapGetters,mapMutations,mapActions}from'vuex'

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：
1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用

参数
state：用来存放组件之间共享的数据。他跟组件的data选项类似，只不过data选项是用来存放组件的私有数据。 用来存放共享的数据
mutations：实际改变 状态(state) 的唯一方式是通过 提交(commit) 一个 mutation的属性。mutations下的函数接收state作为参数，接收一个叫做payload（载荷）的东东作为第二个参数，这个东东是用来记录开发者使用该函数的一些信息，比如说提交了什么，提交的东西是用来干什么的，包含多个字段，所以载荷一般是对象（其实这个东西跟git的commit很类似）还有一点需要注意：mutations方法必须是同步方法！ 用来存储数据
actions：既然mutations只能处理同步函数，我大js全靠‘异步回调’吃饭，怎么能没有异步，于是actions出现了… **actions是异步操作**
actions和mutations的区别
1.Actions 提交的是 mutations，而不是直接变更状态。也就是说，actions会通过mutations，让mutations帮他提交数据的变更。
2.Action 可以包含任意异步操作。ajax、setTimeout、setInterval不在话下
getters:可以向页面发送数据，通过mapGetters 来获取数据，在发送前可以修改shuju
辅助函数
**mapState,mapGetters（这两个是写在计算属性当中操作的是数据）
mapMutations（同步的）,mapActions（异步的） （这两个是写在methods当中 操作的是方法）**

methods:{
...mapMutations(["add","reduce"]),
...mapActions(["addActions"])
},
computed:{
...mapState(["count"]),
...mapGetters(["count"])
}

各个类型的 API各司其职，mutation 只管存，你给我（dispatch）我就存；action只管中间处理，处理完我就给你，你怎么存我不管；Getter 我只管取，我不改的。　action放在了 methods 里面，说明我们应该把它当成函数来用（讲道理，钩子函数也应该可以的） mutation是写在store里面的，这说明，它就是个半成品，中间量，我们不应该在外面去操作它。getter写在了 computed 里面，这说明虽然 getter我们写的是函数，但是我们应该把它当成计算属性来用。