vuex

首先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页面中的辅助函数

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

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

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

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