Vuex 的详解：（四个辅助函数）

什么是vuex：

vuex 是应用程序开发的状态管理状态，他采用了集中式储存管理的应用的所有的组件状态；

Vuex的使用场景:

• 多个视图使用一个状态：

传参的方法对于多层嵌套的组件将会很麻烦，当你使用的vuex这个状态会在你项目的任何地方都可以使用这个状态；

• 不同试图需要变同一状态：

采用父子组件直接或者通过事件来变更和同步状态的多份拷贝，通常会导致无法维护代码；

Vuex简化流程：

View components -> actions(dispatch方式) -> mutations(commit方式) -> state -> View components
而 getters则可以理解为computed，作为state的计算属性

使用Vuex的注意事项：

1. 数据流都是单向的

2. 组件能够调用action

3. action用来派发mutation

4. 只有mutation可以改变状态

5. store是响应式的，无论state什么时候更新，组件都将同步更新

Vuex的五大核心：

1、 state

• Vuex 使用单一状态树，用一个对象就包含了全部的应用层次状态。至此它便作为一个唯一的数据源而存在。
  这也意味着，每个应用将仅仅包含一个store实例。
  单状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

2、 Getter

• 用来从store获取Vue组件数据，类似于computed

3、 Mutation

• 事件处理器用来驱动状态的变化，类似于methods，同步操作

4、 Action

• 可以给组件使用的函数，以此用来驱动事件处理器 mutations，异步操作

5、 Module

• 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

Vuex的四个辅助函数：

• 语法糖，四大金刚辅助函数：mapState,mapActions,mapMutations,mapGetters

四个辅助函数在组件中使用：

import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
export default {
  computed: {
    ...mapGetters({
      "": "vuex仓库定义的方法",
    }),
    ...mapState({}),
  },
  methods: {
    ...mapMutations({}),
    ...mapActions({}),
  },
};
</script>