Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。javascript
状态是什么？在程序中用什么来描述？vue
说白了状态就是数据，Vuex就是用来管理咱们项目中的一些共享数据的，没有Vuex的时候，咱们的数据是放在组件的data选中的，在组件通信的时候，咱们有对应的手段，但相对来讲传递数据比较麻烦：java
父子通信：props，$emit，事件监听web
兄弟通信：EventHub，$on、$emit、$offvuex
何时使用Vuex？数组
须要你进行权衡，小型项目不须要，随着业务功能的复杂程度，能够加入进去。异步
单向数据流：不能直接在子组件中变动父组件传递过来的数据svg
状态，数据函数
在这里能够定义一些全局共享的数据，在各个组件中能够经过this.$store.state.xxx工具
注意：必定要是全局的（有两个组件以上使用），若是只有本组件使用，那么就没有必要定义到store中去，定义到局部的data中便可
导入：import { mapState } from 'vuex'
使用：
```javascript
new Vue({
computed: {
…mapState([‘count’, ‘xxx’])
// 把count和xxx当计算属性用就好了
// 这个mapState([‘count’, ‘xxx’])函数调用完后的返回值形如：{ count() {}, xxx() {} }，用…扩展表达式拆开后，获取到键值对，直接放入到computed对象中了
}
})
```
state计算属性，和计算属性的区别在于，计算属性是定义在组件中的，是局部的，而getter定义在vuex的store中，是全局的，全部组件都能访问到，当咱们须要抽取出一些基于state的公共计算属性时，就能够用这个getter统必定义
导入：import { mapGetters } from 'vuex'
使用：
```javascript
new Vue({
computed: {
…mapGetters([‘getCountMsg’, ‘xxx’])
// 把getCountMsg和xxx当计算属性用就好了
}
})
```
突变，变异，就是用来改变state，很纯洁，就作一件事
注意：不能有异步操做，不符合规范
高能：更改 Vuex 的 store 中的状态（state）的惟一方法是提交 mutation
能够经过：this.$store.commit('mutaionName', payload)调用到mutation
mutationName就是mutation的函数名
payload就是数据（载体）
- 注意：这里只能传递一个参数，若是须要传递多个，能够经过数组或对象
导入：import { mapMutations } from 'vuex'
使用：
```javascript
new Vue({
methods: {
…mapMutations([‘increaseCount’, ‘decreaseCount’])
// 把increaseCount和decreaseCount当方法就好了
}
})
```
动做，能够在这里写一些业务逻辑，触发突变（Mutation），容许有异步操做
Action 相似于 mutation，不一样在于：
Action 提交的是 mutation，而不是直接变动状态。
Action 能够包含任意异步操做。
导入：import { mapActions } from 'vuex'
使用：
```javascript
new Vue({
methods: {
…mapActions([‘increaseCountAsync’, ‘decreaseCountAsync’])
// 把increaseCount和decreaseCount当方法就好了
}
})
```
模块，随着业务复杂度上升，对应的代码确定比较臃肿，咱们能够用模块（Module）来对代码进行重构瘦身，提升代码的可读性
访问模块的state：$store.state.user.name
访问模块的getters：
调用模块的mutations：...mapMutations('user', ['changeName', 'xxx']), // 模块的mapMutations使用
- 第一个参数user表示命名空间
默认状况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块可以对同一 mutation 或 action 做出响应。
若是但愿你的模块具备更高的封装度和复用性，你能够经过添加 namespaced: true 的方式使其成为带命名空间的模块。
注意：模块中的mutations只能拿到本模块的state，可是getters和actions能够获取到
开启严格模式，仅需在建立 store 的时候传入 strict: true：
const store = new Vuex.Store({ // ... strict: true })
在严格模式下，不管什么时候发生了状态变动且不是由 mutation 函数引发的，将会抛出错误。这能保证全部的状态变动都能被调试工具跟踪到。
通常咱们都会加上，可是在生成环境不要加上，由于会实时监测，有性能资源浪费
相似于插件，咱们可让构建工具来处理这种状况：
const store = new Vuex.Store({ // ... strict: process.env.NODE_ENV !== 'production' })
想要使用v-model指令绑定store中的state数据，可使用带有set/get的计算属性
补充说明：mapState、mapGetters方法 computed 选项中、mapMutations、mapActions 放到 methods 选项中
更多资料能够+csheima7