概述
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

状态是什么？在程序中用什么来描述？

说白了状态就是数据，Vuex就是用来管理我们项目中的一些共享数据的，没有Vuex的时候，我们的数据是放在组件的data选中的，在组件通讯的时候，我们有对应的手段，但相对来说传递数据比较麻烦：

父子通讯：props，$emit，事件监听

兄弟通讯：EventHub，$on、$emit、$off

什么时候使用Vuex？

需要你进行权衡，小型项目不需要，随着业务功能的复杂程度，可以加入进去。

单向数据流：不能直接在子组件中变更父组件传递过来的数据

核心概念
State
状态，数据

数据获取
在这里可以定义一些全局共享的数据，在各个组件中可以通过this.$store.state.xxx

注意：一定要是全局的（有两个组件以上使用），如果只有本组件使用，那么就没有必要定义到store中去，定义到局部的data中即可

辅助方法：
导入：import { mapState } from 'vuex'

使用：


new Vue({

  computed: {

    ...mapState(['count', 'xxx'])

    // 把count和xxx当计算属性用就行了



    // 这个mapState(['count', 'xxx'])函数调用完后的返回值形如：{ count() {}, xxx() {} }，用...扩展表达式拆开后，获取到键值对，直接放入到computed对象中了

  }

})


Getter
state计算属性，和计算属性的区别在于，计算属性是定义在组件中的，是局部的，而getter定义在vuex的store中，是全局的，所有组件都能访问到，当我们需要抽取出一些基于state的公共计算属性时，就可以用这个getter统一定义

辅助方法：
导入：import { mapGetters } from 'vuex'

使用：


new Vue({

  computed: {

    ...mapGetters(['getCountMsg', 'xxx'])

    // 把getCountMsg和xxx当计算属性用就行了

  }

})


Mutation
突变，变异，就是用来改变state，很纯洁，就做一件事

注意：不能有异步操作，不符合规范

高能：更改 Vuex 的 store 中的状态（state）的唯一方法是提交 mutation

可以通过：this.$store.commit('mutaionName', payload)调用到mutation

mutationName就是mutation的函数名

payload就是数据（载体）

注意：这里只能传递一个参数，如果需要传递多个，可以通过数组或对象
辅助方法：
导入：import { mapMutations } from 'vuex'

使用：


new Vue({

  methods: {

    ...mapMutations(['increaseCount', 'decreaseCount'])

    // 把increaseCount和decreaseCount当方法就行了

  }

})


Action
动作，可以在这里写一些业务逻辑，触发突变（Mutation），允许有异步操作

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。

Action 可以包含任意异步操作。

辅助方法：
导入：import { mapActions } from 'vuex'

使用：


new Vue({

  methods: {

    ...mapActions(['increaseCountAsync', 'decreaseCountAsync'])

    // 把increaseCount和decreaseCount当方法就行了

  }

})

Module
模块，随着业务复杂度上升，对应的代码肯定比较臃肿，我们可以用模块（Module）来对代码进行重构瘦身，提高代码的可读性

访问模块的state：$store.state.user.name

访问模块的getters：

调用模块的mutations：...mapMutations('user', ['changeName', 'xxx']), // 模块的mapMutations使用

第一个参数user表示命名空间
调用模块的actions：

默认情况下，模块内部的 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

概述
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

状态是什么？在程序中用什么来描述？

说白了状态就是数据，Vuex就是用来管理我们项目中的一些共享数据的，没有Vuex的时候，我们的数据是放在组件的data选中的，在组件通讯的时候，我们有对应的手段，但相对来说传递数据比较麻烦：

父子通讯：props，$emit，事件监听

兄弟通讯：EventHub，$on、$emit、$off

什么时候使用Vuex？

需要你进行权衡，小型项目不需要，随着业务功能的复杂程度，可以加入进去。

单向数据流：不能直接在子组件中变更父组件传递过来的数据

核心概念
State
状态，数据

数据获取
在这里可以定义一些全局共享的数据，在各个组件中可以通过this.$store.state.xxx

注意：一定要是全局的（有两个组件以上使用），如果只有本组件使用，那么就没有必要定义到store中去，定义到局部的data中即可

辅助方法：
导入：import { mapState } from 'vuex'

使用：


new Vue({

  computed: {

    ...mapState(['count', 'xxx'])

    // 把count和xxx当计算属性用就行了



    // 这个mapState(['count', 'xxx'])函数调用完后的返回值形如：{ count() {}, xxx() {} }，用...扩展表达式拆开后，获取到键值对，直接放入到computed对象中了

  }

})


Getter
state计算属性，和计算属性的区别在于，计算属性是定义在组件中的，是局部的，而getter定义在vuex的store中，是全局的，所有组件都能访问到，当我们需要抽取出一些基于state的公共计算属性时，就可以用这个getter统一定义

辅助方法：
导入：import { mapGetters } from 'vuex'

使用：


new Vue({

  computed: {

    ...mapGetters(['getCountMsg', 'xxx'])

    // 把getCountMsg和xxx当计算属性用就行了

  }

})


Mutation
突变，变异，就是用来改变state，很纯洁，就做一件事

注意：不能有异步操作，不符合规范

高能：更改 Vuex 的 store 中的状态（state）的唯一方法是提交 mutation

可以通过：this.$store.commit('mutaionName', payload)调用到mutation

mutationName就是mutation的函数名

payload就是数据（载体）

注意：这里只能传递一个参数，如果需要传递多个，可以通过数组或对象
辅助方法：
导入：import { mapMutations } from 'vuex'

使用：


new Vue({

  methods: {

    ...mapMutations(['increaseCount', 'decreaseCount'])

    // 把increaseCount和decreaseCount当方法就行了

  }

})


Action
动作，可以在这里写一些业务逻辑，触发突变（Mutation），允许有异步操作

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。

Action 可以包含任意异步操作。

辅助方法：
导入：import { mapActions } from 'vuex'

使用：


new Vue({

  methods: {

    ...mapActions(['increaseCountAsync', 'decreaseCountAsync'])

    // 把increaseCount和decreaseCount当方法就行了

  }

})

Module
模块，随着业务复杂度上升，对应的代码肯定比较臃肿，我们可以用模块（Module）来对代码进行重构瘦身，提高代码的可读性

访问模块的state：$store.state.user.name

访问模块的getters：

调用模块的mutations：...mapMutations('user', ['changeName', 'xxx']), // 模块的mapMutations使用

第一个参数user表示命名空间
调用模块的actions：

默认情况下，模块内部的 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