Vuex入门通俗易懂系列（一）

在学习Vue开发中，组件通信一直是一大痛点。当项目是一个非常简单的SPA或者多入口项目时，可以依赖vue自带的prop/$emit进行组件通信；如果规模较大，可以使用总线与兄弟组件通信；如果项目更大，就会有更多复杂的组件关系，复杂的组件通信会让你怀疑人生。好在vue官方出品了vuex，通过全局状态管理解决了这个痛点。vuex虽然很好用，但是我和很多朋友都抱怨vuex的文档和vue-ssr的文档一样，让人看的一头雾水。安装导入一般情况下，我们在使用vue-cli3生成项目时，可以选择将vuex集成到项目中。此时vue-cli3会自动安装vuex并在src文件夹下生成store.js，完成vuex的引入和配置。但是很多同学在生成项目的时候并没有使用vue-cli3或者没有选择集成vuex。此时只能手动安装和引入vuex。安装因为vuex是用来进行全局状态管理的，所以它不仅可以用在开发环境中，也可以用在生产环境中。显然，安装vuex应该使用-S或者--save命令。npminstallvuex-S引入一个类似vue-cli3生成的工程，我们在src文件夹下新建一个store.js，在里面写：//store.jsimportVuefrom'vue'importVuexfrom'vuex'看。使用(Vuex)exportdefaultnewVuex.Store({})然后，我们只需要在vue实例中的store.js中导入Vuex.Store实例：//main.jsimportVuefrom'vue'importAppfrom'。/App.vue'importrouterfrom'./router'importstorefrom'./store'Vue.config.productionTip=falsenewVue({router,//importstorestore,render:h=>h(App)}).$mount('#app')Vuex的使用完成了vuex的安装和引入，接下来我们进入Vuex的使用。vuex中包含三个元素：state、mutation和action。它们之间的关系可以用官网那张名图来表示：重点在这里（State）简单来说，state代表状态，类似于vue中的data（其实本质上是类似的，vuex在beforeCreatevue将状态混合到数据中的钩子）。然而，它们有很大的不同：从用户的角度来看，state是全局的，这要归功于vuex的设计理念——单一状态树。我将在接下来的几篇文章中详细介绍这些。现在我们只需要知道state类似于global下的data即可。下面我们通过一个简单的例子来体验一下state：首先，我们需要修改store.js文件，配置state。可以看出，我们在生成Vuex.Store实例时，传入了实例化option对象，其中包含一个state属性，state对象的属性就是我们定义的全局状态。此时，我们定义了一个全局状态——count，并设置其初始值为1。//store.jsimportVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)exportdefaultnewVuex.Store({//添加状态state:{count:1}})接下来，我们需要添加Count在中被引用，因为它是一个全局状态，我们可以在任何组件中使用它。为了展示它的强大功能，我们在两个不同的组件中使用它。首先我们在App.vue中使用它：在模板中，我们使用$store.state.count来导入这个全局状态，没错，就是这么简单，以$store.state.key的形式调用即可。//App.vue可以发现Home前面多了一个1，就是这意味着我们已经成功引入了全局状态计数。接下来我们在Home.vue的子组件HelloWorld.vue中引入count。同样参考方法：$store.state.count//HelloWorld.vue可以查到，成功.Mutation然而，上面的例子有一个问题，就是全局状态是静态的。在实际应用场景中，一般来说，状态会经常变化。有的同学会说，难道我们不应该直接在方法中修改this.$store.state.key的值吗？对不起，当然不是。状态和数据之间的另一个很大的区别是你不能直接改变状态。更改存储中状态的唯一方法是显式提交更改。这使我们能够轻松跟踪每个状态变化，使我们能够实施一些工具来帮助我们更好地理解我们的应用程序。简而言之，我们将mutation视为一个自定义事件，它接收状态作为参数并修改状态。上段提到的commit是触发mutation自定义事件的方法。光说不练套路，接下来，我们给vuex添加mutation，实现动态变化：当然首先，修改生成Vuex.Store实例的option对象，添加mutation。importVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)exportdefaultnewVuex.Store({state:{count:1},//添加突变:{increment(state){state.count++}}})在上面的代码中，我们添加了一个名为increment的突变。完成自定义事件后，我们只需要触发组件中的突变即可。我们在HelloWorld.vue中添加一个按钮，每次单击它都会触发增量突变。可以发现trigger方法很简单，只需要调用store自带的commit方法即可，参数是需要触发的mutation的名字。//HelloWorld.vue点击页面上的按钮，会发现页面上的两个计数同时增加了1，说明我们成功实现了动态修改状态。Action动作类似于mutation，也相当于自定义事件。只是动作对突变而不是状态起作用。添加action的方法类似，只是在options对象中添加一个action属性。与mutation的参数不同，action的参数是当前创建的Vue.store对象实例的上下文，一般命名为context。我们需要使用它自己的提交方法来触发突变。让我通过一个实际的例子来尝试这个动作：首先，修改选项对象，使新添加的动作可以触发之前的突变：//store.jsimportVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)exportdefaultnewVuex.Store({state:{count:1},mutations:{increment(state){state.count++}},actions:{increment({commit}){commit('increment')}}})由于我们一般只需要context中的commit方法，所以我们可以使用解构的方式直接调用commit方法，而不用在context.commit方式中使用。接下来，只需要修改HelloWorld.vue，使其在点击按钮时即可触发。action的触发方式和mutation类似，只是调用方式是dispatch。//HelloWorld.vue，点击page按钮，你会发现已经实现了和之前一样的效果。综上所述，学习了vuex的三个关键点：state、mutation、action。我们回过头来看看之前的关系图。这时候应该很容易理解了吧？组件交互触??发action，action中执行异步操作（可选）并触发mutation，mutation控制state的变化，state修改后触发responsive并重新渲染组件。PS（其他高级用法，如：getter、module、缩写和vuex项目结构优化，甚至vuex源码分析，在后面的文章中都会一一讲解）最后，个人认为很多新手入门（不管whattheylearn)，可以理解，最好一开始看视频。所以，一分钱一分货。如需购买学习视频，可登陆网站加群http://www.wantmore.top，也可直接加群号：157285015。不定期分享学习干货！