乘热打铁，再来一发！来，继续水一片博文！这个其实比混入更好理解！但是首先你得知道 vuex 是干嘛的！如果你连vuex都不知道干嘛的那么你知道这两个助手函数也没啥用！

一句话总结

节约时间！更简单更高效！

示例代码

这里简单举个例子，很多项目基本都是有 vuex 的，且在大多数项目里面，用户信息都是会缓存到本地的，那么很显然用 vuex 更简单粗暴（当然你可以顺带再存到 localStorage 里，这就不在本博文的讨论范围了），如下就是个非常简单的例子！

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

Vue.use(Vuex)

// 这个是 lodash 的深拷贝
import {cloneDeep} from "lodash";

export default new Vuex.Store({
    state: {
        // 环境变量
        env: cloneDeep(process.env),
        // 用户信息
        userInfo: {}
    },
    mutations: {
        /**
         * 更新环境变量
         * @param state
         * @param env
         */
        updateEnv(state, env) {
            console.log("环境变量已更新！", cloneDeep(env))
            state.env = cloneDeep(env);
        },
        /**
         * 更新用户信息
         * @param state
         * @param userInfo
         */
        updateUserInfo(state, userInfo) {
            console.log("用户信息已更新！", cloneDeep(userInfo))
            state.env = cloneDeep(userInfo);
        }
    },
    // actions 和 modules 正常项目用不到，这里就不展开了
    actions: {},
    modules: {}
})

如果你使用了 vuex 的助手函数，你就可以直接，非常迅速的，在页面里面使用助手函数取用 vuex 中的数据和方法！如下：

<template>
    <div class="view-index">

    </div>
</template>

<script>
// 在 vuex 中抽出 mapState，mapMutations 这两个助手函数
import {mapState, mapMutations} from "vuex"

export default {
    name: "Index",
    computed: {
        // 你就可以用更简单的方式调用 vuex 中的变量了
        ...mapState(["env", "userInfo"])
    },
    methods: {
        // 同样的，你也可以更简单的调用更新函数了
        ...mapMutations(["updateEnv", "updateUserInfo"])
    }
}
</script>

<style scoped>
</style>

当然，肯定这个时候会有机制的小伙伴会说，我没看出来有啥优势啊？我甚至感觉更复杂了呢！没关系！首先你要看的东西上面我们的诉求是什么：我们的诉求是在页面里面可以更方便的调用vuex里面的数据和值，那么如果你选择不用助手函数，直接“硬核”手写调用，那么应该怎么写呢？代码如下：

<template>
    <div class="view-index">

    </div>
</template>

<script>
export default {
    name: "Index",
    computed: {
        // 硬写，硬映射过去，可实现功能，但多了很多重复性相当多的代码
        // 就比如：this.$store.state 这一段，你就是必须要写的
        env() {
            return this.$store.state.env;
        },
        // 而且你要取哪些字段，你就要写几份的：this.$store.state
        userInfo() {
            return this.$store.state.userInfo;
        }
    },
    methods: {
        // 同样的，如果你想随时随地更新值，那么同样也需要映射一遍
        // 也就是只要你想用 vuex 的那个更新函数，你就要写一份：this.$store.commit
        updateEnv(env) {
            this.$store.commit("updateEnv", env);
        },
        // 同理，你想用那个，就得硬写一份：this.$store.commit
        updateUserInfo(userInfo) {
            this.$store.commit("updateUserInfo", userInfo);
        }
    }
}
</script>

<style scoped>
</style>

完结散花！痛快！水一篇博文真带劲！nice!