Vuex它是专门为Vue.js应用程序设计的状态管理工具。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。通俗来讲当有很多组件，组件与组件之间需要进行相互通信，这时就可以用到Vuex保存多个组件的共享状态，这时只需求state就可以在组件之间同步状态了。
vuex的特点是把数据单独的隔离形成一棵树状图，单独隔离这就说明它有自己的生态系统，其中action作为数据输入，state作为数据输出。只能在mutations里修改state，actions不能直接修改state。在mutations中修改state的数据，它只能是同步操作，不能存在异步的操作（但如果是异步也不会报错，只是不建议）。如果是异步的操作，那可以把操作放在action中，拿到数据再通过mutations同步进行处理。下面我们来详细分析vuex的用法及核心概念。
一、基本使用
1、安装 npm install vuex --save
2、在src目录下新建一个vuex的目录store并进行资源的引入，通过Vue.use()安装
import Vue from 'Vue'
import Vuex from 'vuex'
Vue.use(Vuex)
3、安装vuex后，创建一个store.
export default new Vuex.Store({
state：{count:100}
})
4、为了在vue组件中访问，vuex提供了一个从根组件向所有子组件，以store选项的方式“注入”store
new Vue({
el:'#app',
store:store,
})
每一个vuex应用的核心就是store(仓库)。store它就是一个容器，包含着应用中大部分的state(状态)。vuex的状态存储是响应式的，当vue组件从store中读取state，state发生变化 ，那相应的组件也会变化更新。不能直接的改变仓库中的state，改变的唯一方法就是显示的提交mutation.这样可以方便跟踪每一个状态的变化。来面来分别介绍这些概念。
二、核心概念
1、state
vuex使用单一状态树，用一个对象包含全部的应用层级状态。state它是这一状态管理工具唯一的数据源，所有的数据都存储在这里面。这说明了，每个应用将仅仅包含一个store实例。那如何在vue组件中展示呢?由于vuex是响应式的，最简单的方法是在计算属性中返回某个状态。
创建一个名show的组件
<template>
<div>
<h1>{{this.$store.state.count}}</h1>
</div>
</template>
<script>
export default{
name: 'show',
computed:{
count(){
return this.$store.state.count
}
}
}
</script>
<style lang='less'></style>
当this.$store.state.count发生变化时，都会重新计算属性，触发更新相关联的DOM.
如果一个组件需求获取的状态有多个时，如果把这些状态都声明为计算属性，那会很冗余，所以我们可以用发mapState辅助函数来帮助计算属性，mapstate其实就是把state中的属性映射到computed中。在使用它之前先在进行引入。如下所示：
index.js
export default new Vuex.Store({
state: {
//这里放置的是公用数据
count:100,
from:'china'
}
})
-------------------------------------------
show.vue
<template>
<div>
<h1>{{count}}</h1>
<h3>{{sex}}</h3>
<h3>{{from}}</h3>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
name: "show",
data() {
return {
str: "国籍"
};
},
computed: mapState({
//第一种写法
count: "count", //当名字一样时
//第二名写法,使用箭头函数
sex: state => state.from,
//第三种写法，使用普通函数（this指向实例）
from: function(state) {
return this.str + ":" + state.from;
}
})
};
</script>
<style lang='less'></style>
当然computed不会因为引入了mapState辅助函数而失去原有的功能，但mapstate函数返回的是一个对象，这两者要如何混合使用呢？这时，需求使用一个工具函数将多个对象合并为一个，将最终对象传给computed属性。如下所示：
computed: {
localComputed () {
//......
},
// 使用对象展开运算符将此对象混入到外部对象中
...mapState({
// ......
})
}
2、getter
有时候需求从store中的state中派生出一些状态，所以要用到getter,getter是store的计算属性，getter返回的值会会根据依赖被缓存起来，只有当它的依赖值发生改变才会被重新计算。它的使用方法是 $store.getters.属性名。它可带参数，也可以不带参数，接受state为其第一个参数，也可以接受其它getter作为第二个参数。
//index.js
export default new Vuex.Store({
state: {
list: [1, 2, 3, 5, 6, 7, 8, 9, 0]
},
getters: {
fillteredList: (state, getters)=>{
console.log(state,getters);
return state.list.filter(item => item > 5)
}
}
})
--------------------------------
//show.vue
<template>
<div></div>
</template>
<script>
// import { mapState } from "vuex";
export default {
name: "show",
computed:{
list(){
return this.$store.getters.filteredList;
}
}
};
</script>
<style lang='less'>
</style>
我们可以通过mapGetters辅助函数将store中的getter映射到局部计算属性,使用前还是要进行引入。
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
//如果想将一个getter属性另取一个名字，使用对象形式
doneCout:'donetodoCount'
// ...
])
}
}
3、mutation
我们知道更改vuex中store状态的唯一方法就是提交mutation.vuex中的mutation类似于事件，每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)，这个回调函数就是实际进行状态更改的地方，可以看成是{type:handler()}，调用type时用到store.commit方法。
//index.js
export default new Vuex.Store({
state: {
//这里放公用的数据
count: 100,
age: 20
},
mutations: {
//这里面的函数都是用来修改state中状态的
//用this.$store.commit()方法触发
changeCount(state, option) {
//state是我们公用状态，option是执行这个函数时传递的值，最多只有两个参数，最少为一个
console.log(state, option);
console.log(arguments);
// state.count += option;
state.count += option.num;
}
}
})
-----------------------------------------------
button.vue
<template>
<div>
<button @click="add">增加</button>
<button @click="minus">减少</button>
<h2>{{res}}</h2>
</div>
</template>
<script>
export default {
name: "xxx",
computed:{
res(){
return this.$store.state.count;
}
},
//在methods中提交
methods: {
add() {
//commit()执行会默认去mutations中查找对应的函数并执行
// this.$store.commit("changeCount",10);
//还可以改变风格
this.$store.commit({type:'changeCount',num:100})
},
minus() {
// this.$store.commit("changeCount", -10);
this.$store.commit({type:'changeCount',num:-100})
}
}
};
</script>
<style lang='less'></style>
需求注意的是mutation必须是同步的，这是为了调试方便。在项目中使用时，一般将常量放在单独的文件中，这样更有助于协作开发，提高效率。
//mutation-type.js
export const some_mutation = 'some_mutation'
//store.js
import Vuex from 'vuex'
import { some_mutation } from './mutation-type'
let store = new Vuex.Store({
state: {......},
mutations: {
[some_mutation](state, option) {
//......
}
}
})
可以使用mapMutations辅助函数。它的作用是把mutations中的方法映射到组件的methods中。使用辅助函数之前还是要先引入，如下所示：
<template>
<div>
<button @click="add(30)">增加</button>
<button @click="minus">减少</button>
<button @click="changeCount(50)">test</button>
<h2>{{res}}</h2>
</div>
</template>
<script>
import {mapMutations} from 'vuex'
export default {
name: "xxx",
computed:{
res(){
return this.$store.state.count;
}
},
methods: {
...mapMutations(['changeCount']),
...mapMutations({add:'changeCount'}),
// add() {
// this.$store.commit('changeCount',100);
// },
minus() {
this.$store.commit("changeCount", -10);
}
}
};
</script>
<style lang='less'></style>
4、action
actions是为异步操作而设置的。因为mutations只能是同步操作，但在实际的项目中会存在异步操作，这样就变成了在action中去提交mutation，然后在组件的methods中去提交action。只在在提交的时候使用的是dispatch函数，而mutations使用的是commit函数.
actions:{
//这里面的函数最终都会触发mutations中的函数
//这些函数中原则上不能直接修改state中的数据
//通过this.$store.dispatch()
changeCount(store, option){
//console.log(store, option);
setTimeout(() => {
store.commit('changeCount',option)
}, 200);
// console.log(arguments)
}
}
--------------------------------------
methods: {
add() {
this.$store.dispatch('changeCount',100,200);
},
minus() {
this.$store.dispatch('changeCount',-100);
}
}
5、module
由于vuex使用了单一状态树，应用的所有状态都会集中到一个比较大的对象中，当应用比较复杂的时候，store对象就会变的十分的臃肿。所以才有了module，它可以将store分割成模块，每个模块有自己的state,getter,mutation,action甚至是嵌套的子模块，从上到下进行同样方式的分割。它主要是进行模块的划分。
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
对于模块内部的mutation和getter来说，接受的第一个参数是模块的局部状态state。根结点的状态为rootState。
总结一下，对于含有vuex的项目来说，其结构大体如下：1、应用层级的状态都应该集中在store2、提交mutation是更改state的唯一方式 3、异步操作应试放在action里。如果store文件过大，可以将action,mutation,getter进行分割，分割到单独的文件中。
