一听就会---vuex存值取值，辅助函数mapActions,mapMutations超详细版

首先vuex（有些面试官会说 状态管理工具）可以把它理解成一个仓库，和redux一样，但是相对于redux来说 vuex 比较好理解，想学习 redux 同学关注我后续会发放 redux 的学习方法。

store 是默认生成的文件夹，store 翻译成中文是仓库的意思，所以就可以把它理解成一个存储数据的仓库。

好了废话不多说直接上 store 文件夹下的 index.js 文件

首先在默认的 store 库下的 index.js 文件 

import Vue from 'vue'
import Vuex from 'vuex'


import user from './user'
//在这个地方引入
// 一般情况下都是前后名字相同  默认会引入名字为index.js 的文件
Vue.use(Vuex)

export default new Vuex.Store({
    // state: {
    //     // state的作用是用来定义数据的
    // },
    // mutations: {
    //     // 触发同步方法  里面只支持同步
    // },
    // actions: {
    //     // 触发异步方法  里面只支持异步
    // },
    modules: {
        // modules  是模块化的意思
        // 为什么要给他模块化？ 一般我们在公司项目里面 
        // 方便后期的数据管理  比如我这个地方是用户的vuex存储 
        //  那我只需要建立一个user 的模块 后期需要更改这上面的一些逻辑
        //  只需要找到user 就可以更改了。
        // 我们这边建立一个user的模块  
        //在这个地方我们引入模块化
        user
    },
})

新建文件是这样子的。注意上面的 代码是注释掉了的！

 下面是 user 下面的 index.js 文件

export default {
    state: {
        // 辅助函数为 mapState
        // state的作用是用来定义数据的

        // 比如说我们在这里自定义一个token
        // 他是一个字符串类型  定义数据类型之前就要写好 
        //不可以出现上面定义的类型 和下面赋值的类型不相同
        user_token: ""
    },
    mutations: {
        //辅助函数为 mapMutations
        // 触发同步方法  里面只支持同步
        get_token(state, val) {
            // 这里的两个参数一个是上面的state，另外一个是传递过来的val值
            // 我们在这里赋值并且打印一下
            state.user_token = val
            console.log(state.user_token, "vuex里面的数据")
        }
    },
    actions: {
        //辅助函数为 mapActions
        // 触发异步方法  里面只支持异步
        async_get_token(context, val) {
            //这里有两个参数 context 是下面的快捷键 val是传过来的值
            // 我这里命名纯属个人习惯
            context.commit('get_token', val)
                // 使用这个方法以后 触发上面同步get_token方法，再次传递val值
        }
    },
    namespaced: true
     //命名空间
}
// export 是抛出
// export default 是默认抛出
// 在这里的时候抛出后面跟了一个对象 意思是吧整个 {}
// 抛出去

有点懵了？没关系，我们先看一下home页面中的辅助函数

<template>
  <div class="home">
   <button @click="get_token">点击获取token值</button>
   <!-- 下面是取值的方法 -->
  {{this.$store.state.user.user_token}}
     <!-- 个人觉得这样取值比较方便，直接$store,然后state+模块化的名字+定义数据的名字
   就可以取到自己想要的数据 -->
  </div>
</template>
<script>
import {mapActions,mapMutations,mapState} from 'vuex'

export default {
  name: 'Home',
  methods: {
    // 因为mapActions，mapMutations都是方法 所以在这里使用
    // 使用的时候要注意 异步只能使用异步的方法
    // user是模块 也就是我们之前新建的user/index.js  文件
    // 为什么叫user是因为我们在store 库 （store/index）文件下面引入的时候叫user
    ...mapActions("user",['async_get_token']),
    get_token(){
      // 直接this.async_get_token
      this.async_get_token("这是token")
    }
  }
}
</script>

这时候我们通过事件机制再来看，先触发 get_token 方法，代码中也解释到了为什么要加user，

现在我们再反过来看 user 下的 index.js 文件的运行顺序。

点击之后就会出现下图情况啦

 有些面试官在问的时候会询问一些 dispatch 的方法，因为在 vuex 源码中确实是使用的 dispatch ，面试官可能会认为这种方法比较减少性能，但实际上并没有对性能造成多大的影响。

这里给大家偷个懒，具体的 dispatch 使用方法就不写了。而且个人也比较偏好这种使用辅助函数的方式来存值。