Vue实战——vue-cli3创建项目是怎么集成vuex状态管理的?

前文我们讲到，通过vue-cli3.x我们创建了项目news-list。项目gitee地址：

https://gitee.com/vuejslearn/news-list.git

本文，我们来简单的分析vue-cli3是怎么集成vuex的，我们打开项目目录，发现一个文件：store/index.js，没错，这个就是vuex的初始模板。那他是怎么被代码使用的呢？原来，要是用vuex，我们需要首先安装

npm install vuex --save

当然，如果我们通过vue-cli3进行创建项目的话，默认是给我们安装好了的。然后必须显式地通过 Vue.use() 来安装调用 Vuex。

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

Vue.use(Vuex) 

最后，我们需要导出一个默认的store，来注入到vue中

// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)

const store = new Vuex.Store({
 state: {
 count: 0
 },
 mutations: {
 increment (state) {
 state.count++
 }
 }
})

我们打开项目默认的vuex配置文件，发现就是上面的这些代码：

这就是vue-cli3为我们创建项目后，出现的这个文件来源。最后，在vue的创建时(项目中的main.js文件)，注入store

new Vue({
 router,
 store,
 render: h => h(App)
}).$mount('#app')

这样，vuex就注入到了vue中，我们在写代码时，就可以在store中定义我们的状态了，然后全局都是可以使用的。

vuex的创建不要求具体按照某些目录结构，我们可以把它放到任意目录下，但一般的是写一个总的配置文件，然后分模块的写每个模块的state、getter等。这也是分模块构建的思想，因为如果组件多，项目复杂的话，把所有的状态放到一起，会使应用变得非常复杂和臃肿。

原创不容易，鉴于本人水平有限，文中如有错误之处欢迎大家指正。以后我会持续发布vue实战系列的文档，喜欢的朋友欢迎关注。