Vuex 是什么

 目标

• 掌握什么是vuex

• 了解vuex解决的问题

Vuex是什么

组件之间进行传参时对于多层嵌套的组件或对于兄弟组件间将会非常繁琐，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些方法通常会让代码难以维护,这时就需要vuex,它可以在组件之间无障碍的进行传参,并且单独存在于一个组件中,让代码维护起来更加容易和简洁.

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式， 采用集中式存储管理应用的所有组件的状态，解决多组件数据通信. 是vue官方提供的独立于组件体系之外的，管理公共数据的工具.

Vuex中有5个内容需要学习：

1. state： 存放状态, vuex的基本数据,用来存储变量。

2. mutations ： 更改状态的逻辑，同步操作.提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

3. getters： 类似于computed(state的计算属性，对现有的状态进行计算得到新的数据-------派生 ),从基本数据(state)派生的数据,相当于store的计算属性;getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

4. actions： 发起异步请求(提交mutation，异步操作),和mutation的功能大致相同,不同之处在于:
   ① Action 提交的是 mutation,而不是直接变更状态;
   ② Action 可以包含任意异步操作。

5. modules： 模块拆分(将store模块化),可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,管理更为方便。

其中最为重要的内容是 state 和 mutations

actions和mutations和state的关系图如下:

Vuex-辅助函数mapState对数据重命名

目标

掌握mapState对数据重命名的用法。

场景

vuex中的数据与本组件内的数据名相同

格式

...mapState({'新名字': 'xxx'})

Vuex-map函数用法汇总:

如何使用全局state

• 直接使用： this.$store.state.xxx;

• map辅助函数：

computed: { 
  ...mapState(['xxx']), 
  ...mapState({'新名字': 'xxx'})
}

如何使用modules中的state

• 直接使用： this.$store.state.模块名.xxx;

• map辅助函数：

computed: { 
  ...mapState('模块名', ['xxx']), 
  ...mapState('模块名', {'新名字': 'xxx'})
}

如何使用modules中的getters

• 直接使用： this.$store.getters.模块名.xxx

• map辅助函数：

computed: { 
  ...mapGetters('模块名', ['xxx']), 
  ...mapGetters('模块名',{'新名字': 'xxx'})
}

如何使用全局actions

• 直接使用：this.$store.dispatch('action名', 参数)

• map辅助函数：

methods: { 
  ...mapActions(['actions名']), 
  ...mapActions({'新名字': 'actions名'})
}

• methods: { 
    ...mapActions(['actions名']), 
    ...mapActions({'新名字': 'actions名'})
  }

如何使用modules中的actions（namespaced:true）

• 直接使用： this.$store.dispatch('模块名/action名', 参数)

• map辅助函数：

methods: { 
  ...mapActions('模块名', ['xxx']), 
  ...mapActions('模块名',{'新名字': 'xxx'})
}

全天核心API小结