vue实战开发014:状态管理模式Vuex使用详解

     这两天写了几个通用的组件，因为我发现在当前的网页中有很多相似的地方，为了更加快速有效的开发，我把这些通用的类型进行组件形式打包，然后当我在使用的时候直接调用这些组件即可，但是这里发现个问题，那就是因为模组比较大，组件里面还嵌套了其他的组件，比如下面这图，当前是一个组件，里面嵌套了轮播组件和视频预览的组件，要实现这个嵌套还是很简单的，只要在对应的组件中引用我们需要的组件即可，这里的问题是数据的传递。

 为了让组件更具通用性，我把组件中除了固定的内容之外的所有参数都进行了数据传递，也就是说我后续只要把内容一换即可成为另一组模块了，但是也让让我在传递数据的时候遇到了问题，那就是出现了数据的递归传递，操作起来相当的繁琐，所以我打算用Vuex来解决这个问题。

Vuex 是什么？（官方解释）

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

 个人理解：Vuex其实就是Vue提供了一套数据状态管理框架，可以方便的管理复杂应用（比如多层嵌套的组件）间的数据状态，我们在state中定义了一个数据之后，可以在项目中的任何一个组件里直接进行获取和修改，并且你的修改可以得到全局的响应变更。

 下面我们来安装使用Vuex，先在项目中安装 vuex，在项目目录下使用命令安装：npm install vuex --save，同样为了更好的管理该项目，我在src文件目录下新建一个名为store的文件夹并新建一个index.js文件，在这里引入Vuex框架并实例化调用Vuex.Store():

 接下来我们在项目中注册Vuex，在main.js中引入store中的index.js文件，然后在Vue中全局注入一下，这样一来就可以在任何一个组件里面使用this.$store了，当然你也可以在创建项目的时候就选择Vuex，这样就会自行创建了。

 接下来我们来尝试下把视频预览中的数据提到store中来，回到store文件的index.js里面，我们先声明一个state变量，把之前模板中的对象复制到state中，然后再在实例化的Vuex.Store里面传入一个这个state对象，如图所示：

 接下来我们到组件中去通过{{this.$store.state.对象}}来获取对应的值，这样就可以免去我们从父级或者是父级以上的组件中去获取相应的数据了，相对来说直接了很多，也方便了很多。

但是目前从整个项目来说，Vuex貌似不怎么适用，我需要在同一个页面调用多个相同的组件（含嵌套的组件），同时给组件赋值不同的参数值，而Vuex比较擅长的是对组件之间的数据交互、传递和修改（或许还要对Vuex在深入研究下了）。