手把手教你使用Vuex，猴子都能看懂的教程

为什么要做这篇文集呢？市面上关于vuex的教程多如牛毛，甚至vuex被某些大神都封装出花儿来了；一方面是想从最简单最基础的地方带大家使用一下vuex，另一方面也是想让自己复习一下vuex，好，不多废话了，接下来我们简单对vuex介绍一下，这究竟是个啥？

第一步，如果你想了解一个技术，就去他的官网去看，准没错，进入官网，映入眼帘的就是“vuex是什么”：

如图所示，它是一个程序里面的状态管理模式，它是集中式存储所有组件的状态的小仓库，并且保持我们存储的状态以一种可以预测的方式发生变化。对于可以预测，现在我不多做说明，相信在看完这篇文章之后，你就会有自己的理解。

第一步，了解Vuex

? 想象一个场景

如果你的项目里有很多页面（组件/视图），页面之间存在多级的嵌套关系，此时，这些页面假如都需要共享一个状态的时候，此时就会产生以下两个问题：

• 多个视图依赖同一个状态
• 来自不同视图的行为需要变更同一个状态

? 动动你的小脑袋你就会想到解决以上方法的方案:

• 对于第一个问题，假如是多级嵌套关系，你可以使用父子组件传参进行解决，虽有些麻烦，但好在可以解决；对于兄弟组件或者关系更复杂组件之间，就很难办了，虽然可以通过各种各样的办法解决，可实在很不优雅，而且等项目做大了，代码就会变成屎山，实在令人心烦。
• 对于第二个问题，你可以通过父子组件直接引用，或者通过事件来变更或者同步状态的多份拷贝，这种模式很脆弱，往往使得代码难以维护，而且同样会让代码变成屎山。

? 此时，既然思考到了这里，如果换一种思路呢：

• 把各个组件都需要依赖的同一个状态抽取出来，在全局使用单例模式进行管理。
• 在这种模式下，任何组件都可以直接访问到这个状态，或者当状态发生改变时，所有的组件都获得更新。

? 这时候，Vuex诞生了！

这就是 Vuex 背后的基本思想，借鉴了 Flux、Redux。与其他模式不同的是，Vuex 是专门为 Vue 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

? 接着，你就会看到下面这张官网的vuex使用周期图（看不懂没关系）：

? 什么时候应该用vuex呢？

• 这个问题因人而异，如果你不需要开发大型的单页应用，此时你完全没有必要使用vuex，比如你的页面就两三个，使用vuex后增加的文件比你现在的页面还要多，那就没这个必要了。
• 假如你的项目达到了中大型应用的规模，此时您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

? 对于vuex的简单介绍就到这里，接下来，我们一起用起来吧！

第二步，安装

进入项目，在命令行中输入安装指令，回车

npm install vuex --save

然后配置 vuex，使其工作起来：在src路径下创建store文件夹，然后创建index.js文件，文件内容如下：

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

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        // 定义一个name，以供全局使用
        name: '张三',
        // 定义一个number，以供全局使用
        number: 0,
        // 定义一个list，以供全局使用
        list: [
            { id: 1, name: '111' },
            { id: 2, name: '222' },
            { id: 3, name: '333' },
        ]
    },
});

export default store;

修改main.js：

import Vue from 'vue';
import App from './App';
import router from './router';
import store from './store'; // 引入我们前面导出的store对象

Vue.config.productionTip = false;

new Vue({
    el: '#app',
    router,
    store, // 把store对象添加到vue实例上
    components: { App },
    template: '<App/>'
});

最后修改App.vue：

<template>
    <div></div>
</template>

<script>
    export default {
        mounted() {
            // 使用this.$store.state.XXX可以直接访问到仓库中的状态
            console.log(this.$store.state.name); 
        }
    }
</script>

此时，启动项目npm run dev，即可在控制台输出刚才我们定义在store中的name的值。

• ? 官方建议1：

官方建议我们以上操作this.$store.state.XXX最好放在计算属性中，当然，我也建议你这么使用，这样可以让你的代码看起来更优雅一些，就像这样：

export default {
    mounted() {
        console.log(this.getName); 
    },
    computed:{
        getName() {
            return this.$store.state.name;
        }
    },
}

此时可以得到和上面一样的效果。

• ? 官方建议2：

是不是每次都写this.$store.state.XXX让你感到厌烦，你实在不想写这个东西怎么办，当然有解决方案，就像下面这样：

<script>
import { mapState } from 'vuex'; // 从vuex中导入mapState
export default {
    mounted() {
        console.log(this.name);
    },
    computed: {
        ...mapState(['name']), // 经过解构后，自动就添加到了计算属性中，此时就可以直接像访问计算属性一样访问它
    },
}
</script>

你甚至可以在解构的时候给它赋别名，取外号，就像这样：

...mapState({ aliasName: 'name' }),  // 赋别名的话，这里接收对象，而不是数组

? 至此，安装vuex并且初始化的工作就结束了，此时你可以很轻易的在项目的任意地方访问到仓库里的状态

第三步，了解修饰器：Getter

当你看到这里的时候，证明你上一步已经完美的创建好一个vue项目，并且将vuex安装了进去！

好！接下来，我们介绍一个读取操作的 “修饰利器” ---Getter

• ? 设想一个场景，你已经将store中的name展示到页面上了，而且是很多页面都展示了，此时产品经理过来找事儿?：

• 产品经理：所有的name前面都要加上“hello”！

• 我：为什么？

• 产品经理：我提需求还需要为什么吗？

• 我：好，我加！

这时候，你第一想到的是怎么加呢，emm...在每个页面上，使用this.$store.state.name获取到值之后，进行遍历，前面追加"hello"即可。

??‍♂️ 错！这样很不好，原因如下：

• 第一，假如你在A、B、C三个页面都用到了name，那么你要在这A、B、C三个页面都修改一遍，多个页面你就要加很多遍这个方法，造成代码冗余，很不好；
• 第二，假如下次产品经理让你把 “hello” 改成 “fuck” 的时候，你又得把三个页面都改一遍，这时候你只能抽自己的脸了...

?? 吸取上面的教训，你会有一个新的思路：我们可以直接在store中对name进行一些操作或者加工，从源头解决问题！那么具体应该怎么写呢？这时候，本次将要介绍的这个Getter利器闪亮登场！

? 怎么用呢？不废话，show code！

首先，在store对象中增加getters属性

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

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        name: '张三',
        number: 0,
        list: [
            { id: 1, name: '111' },
            { id: 2, name: '222' },
            { id: 3, name: '333' },
        ]
    },
    // 在store对象中增加getters属性
    getters: {
        getMessage(state) { // 获取修饰后的name，第一个参数state为必要参数，必须写在形参上
            return `hello${state.name}`;
        }
    },
});

export default store;

在组件中使用：

export default {
    mounted() {
        // 注意不是$store.state了，而是$store.getters
        console.log(this.$store.state.name);
        console.log(this.$store.getters.getMessage);
    }
}

然后查看控制台：

没有问题的

? 官方建议： 是不是每次都写this.$store.getters.XXX让你感到厌烦，你实在不想写这个东西怎么办，当然有解决方案，官方建议我们可以使用mapGetters去解构到计算属性中，就像使用mapState一样，就可以直接使用this调用了，就像下面这样：

<script>
import { mapState, mapGetters } from 'vuex';
export default {
    mounted() {
        console.log(this.name);
        console.log(this.getMessage);
    },
    computed: {
        ...mapState(['name']),
        ...mapGetters(['getMessage']),
    },
}
</script>

此时可以得到和之前一样的效果。

当然，和mapState一样你也可以取别名，取外号，就像下面这样：

...mapGetters({ aliasName: 'getMessage' }),  // 赋别名的话，这里接收对象，而不是数组

? OK，当你看到这里，你已经成功的把Getter用起来了，你也能明白在什么时候应该用到getters，你可以通过计算属性访问（缓存），也可以通过方法访问（不缓存），你甚至可以再getters的方法里面再调用getters方法，当然你也实现了像state那样，使用mapGetters解构到计算属性中，这样你就可以很方便的使用getters啦！

? 读取值的操作我们有 “原生读（state）” 和 “修饰读（getters）”，接下来就要介绍怎么修改值了！

第四步，了解如何修改值：Mutation

未完待续……