上一篇我们简单的介绍了一下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库。
网友评论