前言：在最近学习 Vue.js 的时候，看到国外一篇讲述了如何使用 Vue.js 和 Vuex 来构建一个简单笔记的单页应用的文章。感觉收获挺多，自己在它的例子的基础上进行了一些优化和自定义功能，在这里和大家分享下学习心得。 在这篇教程中我们将通过构建一个笔记应用来学习如何在我们的 Vue 项目中使用 Vuex。我们将大概的过一遍什么是 Vuex.js，在项目中什么时候使用它，和如何构建我们的 Vue 应用。
项目源码：vuex-notes-app；有需要的同学可以直接下载源码查看。 主要知识点 Vuex 状态管理机制的使用 Vue.js 的基础 api Vue-cli 脚手架的安装及使用 vur-router 的使用 ES6 的语法，这里推荐看下阮一峰的入门教程
Vuex 概述 在我们迫不及待的开始项目之前，我们最好先花几分钟来了解下 Vuex 的核心概念。 Vuex 是一个专门为 Vue.js 应用所设计的集中式状态管理架构。它借鉴了 Flux 和 Redux 的设计思想，但简化了概念，并且采用了一种为能更好发挥 Vue.js 数据响应机制而专门设计的实现。 state 这样概念初次接触的时候可能会感觉到有点模糊，简单来说就是将 state 看成我们项目中使用的数据的集合。然后，Vuex 使得 组件本地状态（component local state）和 应用层级状态(application state) 有了一定的差异。 component local state：该状态表示仅仅在组件内部使用的状态，有点类似通过配置选项传入 Vue 组件内部的意思。 application level state：应用层级状态，表示同时被多个组件共享的状态层级。 假设有这样一个场景：我们有一个父组件，同时包含两个子组件。父组件可以很容易的通过使用 props 属性来向子组件传递数据。 但是问题来了，当我们的两个子组件如何和对方互相通信的？ 或者子组件如何传递数据给他父组件的？在我们的项目很小的时候，这个两个问题都不会太难，因为我们可以通过事件派发和监听来完成父组件和子组件的通信。
然而，随着我们项目的增长： 1、保持对所有的事件追踪将变得很困难。到底哪个事件是哪个组件派发的，哪个组件该监听哪个事件？ 2、项目逻辑分散在各个组件当中，很容易导致逻辑的混乱，不利于我们项目的维护。 3、父组件将变得和子组件耦合越来越严重，因为它需要明确的派发和监听子组件的某些事件。
精品链接https://blog.csdn.net/qq_24122593/article/details/53131006
网友评论