什么是vuex，vuex的五大核心和辅助函数

1. 什么是vuex

vuex是专门针对vue.js程序开发的状态管理工具。它采用集中式存储管理应用的所有组件的状态，并且一相对应的规则保证以一种可预测的方式发生变化。

---

2. vuex在项目中的应用及配置

• 在main.js文件中

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import * as apiConfig from '@/common/api/config'

// vue的自定义属性，可在vue文件中通过 this.apiConfig 调用
Vue.prototype.apiConfig = apiConfig

new Vue({
  render: h => h(App),
  router,
  store
}).$mount('#app')

• store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import state from './state'
import mutations from './mutations'
import createLogger from 'vuex/dist/logger'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
  actions,
  getters,
  state,
  mutations,
  strict: debug,
  plugins: debug ? [createLogger()] : []
})

• store/mutations.js

export default {
    userInfo (state, userInfo) {
        try {
            window.sessionStorage.setItem('userInfo', JSON.stringify(userInfo))
        } catch (error) {}
        state.userInfo = userInfo
    },
    router_from (state, from) {
        state.router_from = from
    },
    router_next (state, n) {
        state.router_next = n
    },
    SET_AudioTimer (state, object) {
        state.audioTimer = object
    },
    session_list (state, array) {
        state.session_list = array
    },
    use_session_list (state, array) {
        state.use_session_list = array
    },
    now_consultant_info (state, object) {
        state.now_consultant_info = object
    },
    im_connect (state, isConnect) {
        state.im_connect = isConnect
    },
    NIM_VAR (state, object) {
        state.NIM_VAR = object
    },
    listenEnd (state, bool) { // 监听结束
        state.listenEnd = bool
    }
}

---

2. vuex的五个核心概念

1. state：Vuex的基本数据，用来存储变量
2. getter：从基本数据（state）派生的数据，相当于state的计算属性
3. mutation：提交数据更新的方法，必需是同步的（如果是异步操作，则需要action），每个 mutation 都有一个字符串事件类型（type）和一个回数（handleer）
   　 回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。
4. action：和 mutation 的功能大致相同，不同之处在于

1. action 提交的是 mutation，而不是直接变更状态
2. action 可以包含任意异步操作

5. modules：模块儿化 vuex ，可以让每个模块拥有自己的 state，getter，mutation，action，使得结构非常清晰，方便管理

---

3. vuex 辅助函数

• 辅助函数
  通过辅助函数mapState、mapActions、mapMutations，把vuex.store中的属性映射到vue实例身上，这样在vue实例中就能访问vuex.store中的属性了，对于操作vuex.store就很方便了。

state辅助函数为mapState，actions辅助函数为mapActions，mutations辅助函数为mapMutations。（Vuex实例身上有mapState、mapActions、mapMutations属性，属性值都是函数）

---

1. mapState：把 store 属性映射到 computed

• state 用来存储公共状态，在 state 中的数据都是响应式的

响应式原因：
state 里面都有一个 setters、getters 方法；data中的方法也是响应式的，因为里面也有 setters、getters 方法

computed:{
         ...Vuex.mapState({
            input:state=>state.inputVal,
            n:state=>state.n
        })   
    }

---

• 在 computed 属性中用来接收 state 中的数据有两种方法（数组对象和推荐对象）

          computed:Vuex.mapState(["属性"])  把state中的数据通过mapState映射到computed组件身上

          computed:Vuex.mapState({
            key:state=>state.属性   //优点：01本身key值是别名，要的是val的值，key的值a 和 val="a"一样就行，随意写。
                                      减少state里面长的属性名。 02可以在函数内部查看state中的数据
                                      数组方式的话，必须按照state中的属性名
          })

---

• 如果自身组件也需要 computed 的话，通过解构赋值解构出来

   computed:{
            ...Vuex.mapState({
               key:state=>state.属性
            })
          }

---

2. mapAcions 把actions里面的方法映射到methods中

methods:{
        ...Vuex.mapActions({
            add:"handleTodoAdd",    //val为actions里面的方法名称
            change:"handleInput"     
        })
    }
//直接代用add和change方法就行，不过要记得在actions里面做完数据业务逻辑的操作

actions：
actions 里面函数主要是用来处理异步的函数以及一些业务逻辑，每一个函数里面都有一个形参，这个形参是一个对象。里面有一个 commit 方法，这个方法用来触发 mutilations 里面的方法

   mapActions

        使用方式
          methods:Vuex.mapActions([""])


          methods:{
            ...Vuex.mapActions({
              key:val--->actions里面的方法名称
            })

          }

---

3. mapMutations：把mutations里的方法映射到methods中

• 只是做简单的数据修改（列入++），它没有涉及到数据的处理，没有用到业务逻辑或者异步函数，可以直接调用mutations里的方法改数据

methods:{
      
        ...Vuex.mapMutations({
            handleAdd:"handlMutationseAdd"
        })
    }

mutations：
mutations 里面的函数主要用来修改state中的数据。mutations里面的方法都有两个函数，一个是store中的state，另一个是需要传递进来的参数

      辅助函数
      mapMutations
             使用方式
          methods:Vuex.mapMutations([""])


          methods:{
            ...Vuex.mapMutations({
              key:val--->actions里面的方法名称
            })

          }