vuex的基本使用

1. 使用vuex的背景

我们在小的项目（组件少且关系简单）可以通过父子组件props、兄弟组件eventbus等方法进行传参，但是如果一个比较庞大的项目会有上百个组件且他们之间的关系错综复杂，那么我们就需要一个管家。

2. vuex概念

vuex:  vue官方提供的状态管理插件，采用集中式存储管理应用的所有组件的状态，解决多组件间的数据通信。

可以想象成一个共享的大仓库，哪个组件想要拿数据就直接去仓库拿就行。

3. vuex的基本使用

3.1 vuex的安装

vue2.x可以安装3.2.0版本适配~

3.2 vuex的配置

一般会在src->store->index.js中配置vuex相关属性。

可以类比另一个vue官方提供的专门做路由的插件vue-router的使用

• 先导入Vue和Vuex
• 使用Vue.use(Vuex)注册为插件，使用一次
• 向外暴露
• 在入口文件中导入并挂载，此时所有的组件都会带有$.store属性。

3.3 vuex的使用

• 在任何组件中，通过this.$store.state.属性名才获取公共数据，公共数据在配置对象的state对象中定义
• 在任何组件中，通过this.$store.commit(‘mutation事件名’, mapper参数)修改state里的数据，公共数据的修改函数在mutations中定义
• 在任何组件中，通过this.$store.getters.属性名来获取getters派生后的值，getters就可以类比计算属性

上面都是修改和定义数据，但是如果我们想从服务器发起请求拿数据的时候，我们就不可避免的要发异步请求获取数据。

• 在任何组件中，通过this.$store.dispatch(‘actions的名字’，参数)调用action，

4. vuex的进阶 - 辅助函数的使用

根据上述vuex的介绍和操作，我们知道有了vuex，不需要再考虑不同关系组件间的数据传递，可以直接通过$store进行获取数据。

那么：如何将state中的count数据定义在组件内的计算属性中？

• 法一：computed：{count() {return this.$store.state.count}}

  虽然this.$store.state可以很方便的把state中的数据融入computed，但如果要融入多个就会出现代码冗余的情况。

• 法二：mapState辅助函数，vuex提供的更简便的办法

  import {mapState} from ‘vuex’

  expoer default {

  ​ computed: mapState([‘count1’, ‘count2’, …])}//填了那些就会自动映射为一个计算属性

  这样写的问题：如果这个组件本身有自己的计算属性，那么这样写的话就会覆盖

  使用es6语法中的展开运算符

  computed: {

  ​ xxx,

  ​ …mapState([count1, count2,…])}

reference: Vuex详解一：彻底弄懂state、mapState、mapGetters、mapMutations、mapActions - 掘金 (juejin.cn)