从无到有搭建Vue.js+webpack前端开发环境（五）

上一篇我们简单的介绍了一下vue-router的下载和引入，并且将router.js文件稍微做了修改。这篇文章介绍了vuex库，并将其引入工程。

第五阶段：引入vuex库

什么是vuex？

vuex 是一个专为 vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。这是官网给出的解释，我个人理解就是一个用来管理各个组件状态的工具。在一些大型的工程中组件的状态非常重要，尤其是一些电商网站。

如何使用vuex？

vuex官网同样也介绍了三种安装方法，CDN引用、npm下载和构建开发版。

• CDN引用

和vue-router一样，只要在页面中引用这个库就可以了：

<script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"></script>

• npm下载

同样，我们可以通过npm下载：

npm install vuex --save

也可以通过yarn下载，在这里就不再赘述了。

• 构建开发版

vuex同样也是可以自己编译安装的，具体步骤如下：

git clone https://github.com/vuejs/vuex.git node_modules/vuex
cd node_modules/vuex
npm install
npm run build

适合本工程的安装方法？

还是用第二种方法，因为我们构建的是模块化工程。按照官方文档的推荐，我们还需要将工程文件修改一下。

store文件夹

我们需要添加一个这样的store文件夹，并在index.js中引入vuex：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

然后书写全局的store对象并将它暴露出来让main.js入口文件来调用它，我是这样设置的:

store/index.js

最后，我们也要在main.js中引用它，我们在里面插入这样的代码：

import store from './store/index.js'

最终的Vue对象也是这个样子的：

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

到目前为止，我们已经为我们的工程引入了vuex这个工具了，但这个工具不是必须的，尤其在一些小的工程中vuex会显得非常冗余，所以这部分内容也应该按需引入。在下一篇文章会重点讲一下vue的UI库。