Vuex教程第六讲：Vuex的管理员Module--06

写在前面

这一讲是 Vuex 基础篇的最后一讲，也是最为复杂的一讲。如果按照官方来的话，对于新手可能有点难以接受，所以想了下，决定干脆多花点时间，用一个简单的例子来讲解，顺便也复习一下之前的知识点。

首先还是得先了解下 Module 的背景。我们知道，Vuex 使用的是单一状态树，应用的所有状态会集中到一个对象中。如果项目比较大，那么相应的状态数据肯定就会更多，这样的话，store 对象就会变得相当的臃肿，非常难管理。

这就好比一家公司只有老板一个人来管理一样。如果小公司倒还好，公司要是稍微大一点，那就麻烦了。这个时候，老板就会成立各大部门，并给各大部门安排一个主管，把管理的任务分派下去，然后有什么事情需要处理的话，只需要跟这几个主管沟通，由主管再把任务分配下去就行了，这就大大提高了工作效率，也减轻了老板的负担。

那么同样的道理，Module 其实就承担了部门管理员的角色，而 store 就是老板。理解了这一层，那么后面就好办多了，接下来，咱们就一步一步动起手来开始实践。

一、准备工作

这里我们使用官方提供的 vue-cli 来建一个项目「vuex-test」。当然，先得安装 vue-cli：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装完成后，就可以使用以下命令来创建项目了：

vue create vuex-test

还可以使用图形化界面来创建：

vue ui

具体关于 vue-cli 的使用方法可以去官方查看，戳此进入 。

项目创建完成以后，找到项目安装的目录，并打开控制台执行：

// 先定位到项目的目录下
cd vuex-test

// 然后安装 vuex
npm install vuex --save

// 运行一下
npm run serve

运行完成，可以打开 http://localhost:8080/ 看下效果。

最后大家找一个自己比较比较喜欢的 IDE 来打开这个项目，方便查看和编辑。我个人比较喜欢用 WebStore，这里也推荐给大家。

二、简单入手

项目的默认结构图

这里，我们只看 src 目录，其他的暂时不管。组件 components 不在这一讲的范围内，所以也可以忽视，资源 assets 也没什么可说的，就是如果有图片或者视频什么的话，都放在这个文件夹里面就是了。

我们打开 App.vue 文件，去掉组件的相关代码，并编写一点简单的 vue 代码。修改如下：

<template>
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png" />
        <h1>{
  {name}}</h1>
        <button @click="modifyNameAction">修改名字</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                name: 'Lucy'
            }
        },

        methods: {
            modifyNameAction() {
                this.name = "bighone"
            }
        }
    }
</script>

现在我们引入 Vuex &