vue教程菜鸟教程（vuex菜鸟教程）



父向子传值： v-bind 属性绑定

子向父传值： v-on 事件绑定

兄弟组件之间共享数据 EventBus

Vuex是实现组件全局状态(数据)管理的一种机制，可以方便的实现组件之间数据的共享

为什么要使用vuex？

我们先来看看如果没有vuex，不同组件之间想要进行数据传递的过程：

当组件A想要和组件B进行数据共享的时候，需要经过多条路径去和B进行数据同步

如果有vuex，不同组件之间想要进行数据传递的过程：

有了vuex当“中间商”后，我们就能让组件和组件之间的数据传递变得简单起来

1、 能够在vuex中集中管理共享的数据，易于开发和后期的维护
2、 能够高效的在组件间实现数据共享，提高开发效率
3、 存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步

什么情况下的数据适合储存到vuex中呢？

一般情况下，只有组件之间需要共享的数据才有必要存到vuex中，对于组件中的某些私有数据依旧存储在组件自身的data中就行了。

终端输入命令：

在cmd中输入vue create projectname

会出现如下选项

我这里选择的是 [vue2]

然后就会进入安装页面，静待安装，出现如下界面时表示安装完成：

我们现在打开这个项目来看看它的目录结构：

这里它告诉我们需要安装依赖然后启动项目，但是我们不急，先来分析一下目录结构

我们按照前面的步骤来一步一步把vuex加入我们新建的项目中。

第一步先 npm install

安装完成后输入 npm install vuex --save

(这里如果出现安装失败–报错timeout可以参考我的另一篇博客)

安装完成后，先写store对象：

这里的store.js的创建目录是与main.js平级的，然后state里面是通过key-value的方法来储存全局可访问的变量的。

然后就将store挂载到入口文件main.js中

将store挂载到注册的vue实例对象中 就能在后面的开发过程中使用到vuex了

• State
• Mutation
• Action
• Getter
• Module

State提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中进行储存。

示例：

这里的count就是全局共享的数据

组件访问state的第一种方式：this.$store.state.全局数据名称

组件访问state中数据的第二种方式：

通过刚才导入的mapState函数，将当前组件所需要的全局数据，映射为当前组件的computed计算属性：

用于变更Store中的数据

触发mutation的第二种方式

通过刚刚导入的mapMutations函数，将需要的mutations函数映射为当前组件的methods方法。

触发actions异步任务时携带参数

Getter 用于对store中的数据进行加工处理形成新的数据。

• Getter可以对Store中已有的数据加工处理之后形成新的数据，类似于vue的计算属性；
• Store中数据发生变化，Getter的数据也会同步发生变化。

如何使用Getter

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

这个案例是用来熟悉Vuex的各项核心概念的
第一版：使用State 、 Mutations 、 Action 和 Getter
直接上代码图 + 贴代码
整体demo示意图：


demo代码汇总：

add.vue：state 和 mutation 的第一种使用方法

subt.vue ：state 和 mutation 的第二种使用方法

store.js （这里是vuex的配置文件）

App.vue

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/81353.html