vuex中的辅助函数

1.Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

简单来说，就是类似一个共享数据管理的仓库，我们可以把一些多个地方需要使用到数据存储到仓库中，当我们做一些数据处理的时候，就可以对仓库中的数据进行操作，这样多个地方就可以实时更新数据。 （本人个人理解）

什么情况下我应该使用 Vuex？
Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。

2.map辅助函数mapState,mapMutations,mapGetters

1.三个函数都需要使用前导入

import { mapState, mapMutations, mapGetters } from 'vuex'

mapState
1.作用：拿到vuex中state中的数据

2.接收：在计算属性中接收,两种方式接收

		单个数据接收

computed: mapState([
				  // 映射 this.count 为 store.state.count
				  'username'
				])

		多个数据接收（推荐）

computed: {
			// 可以写其它属性
			  // 使用对象展开运算符将此对象混入到外部对象中
			  ...mapState([' 属性名 '])
			}

3.使用: this.属性名 （属性名：state中的属性）

<div>用户名：{{username}}</div>

this.info

mapMutations
1.作用：调用方法修改vuex中的属性，此方式修改可以实时更新vuex
2.申明

mutations: {

    // 两种写法
    // SETUSERINFO(state, newInfo){
    //   return (state.userInfo = newInfo)
    // }

    // 修改用户信息
    SETUSERINFO: (state, newInfo) => (state.userInfo = newInfo),

  },

3.接收：可以接收多个方法
methods: { ...mapMutations(['方法名','方法2...']
}`
此方法有一个参数，state：是vuex中state对象
传入一个参数时直接传入，传入多个参数可以传对象

4.使用：首先需要在vuex中定义mutations，对象里面定义针对vuex中操作的方法
通过this.方法名调用

 this.方法名(参数)

mapGetters
1.作用：类似于计算属性，在vuex中对数据进行操作并返回

2.申明

getters: {
    setGender (state) {
      const gender = { 0: '保密', 1: '男', 2: '女' }
      return gender[1]
    }
  }

3.接收：在计算属性中接收
此方法与mapMutations类似，也是有一个参数state，也可以传参

computed: {
    // 分辨性别
    ...mapGetters(['setGender']),
  }

4.使用：首先需要在vuex中定义getters，类似于计算属性，里面定义一个方法，需要返回一个值
通过this.属性名调用

<div>性别：{{setGender}}</div>