一、vuex概述
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
组件之间共享数据的方式
父向子传值：v-bind属性绑定 子向父传值：v-on事件绑定 兄弟组件之间共享数据：EventBus $on接收数据的那个组件 $emit发送数据的那个组件
（但是面对大量的数据共享，就需要引用xuex
vuex定义了一个公共数据文件，方便不同组件之间的数据共享）
二、vuex的基本使用
1、利用npm包管理工具，进行安装 vuex。在控制命令行中输入下边的命令就可以了。
npm install vuex --save要注意的是这里一定要加上 –save，因为你这个包我们在生产环境中是要使用的。
2、新建一个store文件夹（这个不是必须的），并在文件夹下新建store.js文件，文件中引入我们的vue和vuex。
import Vue from 'vue';
import Vuex from 'vuex';3、使用我们vuex，引入之后用Vue.use进行引用。
import Vue from 'vue';
import Vuex from 'vuex';通过这三步的操作，vuex就算引用成功了，接下来我们就可以尽情的玩耍了。
4、在main.js 中引入新建的vuex文件
import store from './store'5、再然后 , 在实例化 Vue对象时加入 store 对象 :
new Vue({
el: '#app',
router,
store,//使用store
template: '<App/>',
components: { App }
})三、vuex的核心概念
3.1state
State | Vuex (vuejs.org)
State提供唯一的公共数据源，所有共享的数据都要统一放到Store（仓库）的State中进行存储。
//创建store数据源，提供唯一公共数据
const store = new Vuex.Store({
state: {count:0}
})组件访问State数据的第一种方式：
this.&store.state.count(全局数据名称)mapState辅助函数
当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键：
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'
export default {
// ...
computed: mapState({
// 箭头函数可使代码更简练
count: state => state.count,
// 传字符串参数 'count' 等同于 `state => state.count`
countAlias: 'count',
// 为了能够使用 `this` 获取局部状态，必须使用常规函数
countPlusLocalState (state) {
return state.count + this.localCount
}
})
}当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。
computed: mapState([
// 映射 this.count 为 store.state.count
'count'
])组件访问State数据的第二种方式：
//1.从vuex中按需导入mapState函数
import { mapState } from 'vuex'通过刚才导入的mapState函数，讲当前组件需要的全局数据，映射为当前组件的computed计算属性：
//2.将全局数据，映射为当前组件的计算属性
comuted: {
...mapState({'count'})
}
3.2Getter
Getter用于对Store中的数据进行加工处理形成新的数据。
①Getter可以对Store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性。
②Store中数据发生变化，Getter的数据也会跟着变化。
(即是获取到state数据并添加样式的函数)
//定义Getter
const store new Vuex.Store({
state:{
count:0
},
getters:{
showNum:state =>{
return'当前最新的数量是['+state.count+']'
}
}
})
3.3Mutation
Mutation用于变更Store中的数据。 只能通过mutation定义函数来变更Store数据，不可以直接操作Store中的数据（减少后期维护成本）。 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。
（主要是防止组件用this.&store.state.count修改了全局数据，报错时维护过于麻烦问题，多个组件如果一报错就需要把修改过数据的组件一一查错，非常麻烦）
在mutation里不能执行异步操作
触发mutation的第一种方式实例：
//定义Mutation
const store = createStore({
state: {
count: 0
},
mutations: {
add (state) { //事件处理函数，改变数据接受的参数永远是state！，也还可以传参
// 变更状态
state.count++ //定义了一个递增add函数
}
}
})//触发mutation
methods: {
handlel() {
//触发mutation的第一种方式
this.$store.commit('add')
}
}
触发mutation的第二种方式：
//从vuex中按需导入mapMutations函数
import {mapMutations} from 'vuex'通过刚才导入的mapMutations函数，将需要的mutations函数，映射为当前组件的methods方法：
//将指定的mapMutations函数，映射为当前组件的methods函数
methods: {
...mapMutations({'add'}),
handler(){
this.add() //调用add()函数
}
}3.4Action
Action用于处理异步任务。 如果通过异步操作变更数据，必须通过Action,而不能使用Mutation,但是在Action中还是要通过触发 Mutation的方式间接变更数据。（依旧是只能用mutation函数能修改state数据的原则）
context也就相对Vue.Store
dispath函数是专门用来触发action
