项目如何搭建vuex

一直想写技术微博，为了方便总结、记录，在未来的某一天，回过头来看自己的博客，获取会有不一样的感受吧。

进入正文~

最近公司技术分享，发现其他平台 都在用vuex，突然觉的自己的项目构建太乱了，也有必要引入vuex，作为架构优化的第一步吧。以下是自己对vuex的具体理解和实践~

主要分两大部分，第一部分理论知识铺垫，第二部分代码实践

一、理论铺垫（此部分解释为什么要用vuex）

vuex的官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

组件data（）中的状态是组件私有的，而vuex中的state，是可以共享的。

一般父子（嵌套组件）组件进行数据共享，我们用的是props、$emit；

那么vuex用来解决多个组件状态共享。如果项目中多处用到同一个数据，可以考虑放在store里。总而言之，如果只是局部父子组件之间的数据问题，就用props等处理，全局状态的话考虑vuex，统一管理。

具体的概念性可以参考vuex官方网址点击打开链接，讲的挺清楚的。

二、代码实践

安装、使用vuex

首先在vue.js开发环境中vuex  

npm install vuex --save;

然后在main.js中创建store对象

import vuex from 'vuex'
Vue.use(vuex);
var store = new vuex.Store({//store对象
    state:{
        show:false
    }
})

再然后在vue实例化的时候加入store对象：

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

完成到这一步 , 上述例子中的 $store.state.show 就可以使用了。

现在有一个问题，store对象是放在main.js里面，为了方便日后的维护管理，最好把vuex的配置单独放出来，在src下新建一个store文件夹，创建一个index.js:

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

export default new vuex.Store({
    state:{
        show:false
    }
})

相应的main.js里的代码应该改成：

//vuex
import store from './store'

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

这样store就分离出去了。

最终的项目结构如下：src下

至此，vuex已经搭建好了