前文我们讲到，通过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实战系列的文档，喜欢的朋友欢迎关注。
分享到:
閱讀更多 溫馨的醬牛肉 的文章
