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

大家好，我是讯享网，很高兴认识大家。

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <p></p>

讯享网

父向子传值： 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

讯享网

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

相关推荐