Vuex的作用有哪些

这篇文章给大家分享的是有关Vuex的作用有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

概述

想必用过vue。js 的童鞋，一定知道在 vue 各个组件之间传值的痛苦，基于父子、兄弟组件，我们传值可能会很方便，但是如果是没有关联的组件之间要使用同一组数据，就显得很无能为力了，而 vuex 就很好的解决了我们这种问题。所以 Vuex 也是必须掌握的，出去面试也是必问的，那么接下来我们就来简单介绍下 vuex 是如何来管理组件的状态的。

组件之间共享数据的方式

父向子传值：v-bind 属性绑定， props 接收；$parent/$children；$refs；$attrs/$listeners；

子向父传值：v-on 事件绑定，结合 $emit 触发；$parent/$children；

兄弟组件之间共享数据：EventBus；Vuex

• $on 接受数据的那个组件

• $emit 发送数据的那个组件

Vuex 原理简介

Vuex 实现了一个单向数据流，在全局拥有一个 state 存放数据，当组件要更改 state 中的数据时，必须通过 mutations 进行，mutations 同时提供了订阅者模式供外部插件调用获取 state 数据的更新。而当所有异步操作（常用于调用后端接口异步获取数据）或批量的同步操作需要走 actions，但 actions 也是无法直接修改 state 的，还是需要通过触发 mutations 中的方法，然后 mutations 来修改 state 的数据。数据变更后相应推送给组件，组件重新渲染到视图上。

vuex 是 vue 的状态管理器，存储的数据是响应式的。但是并不会保存起来，刷新之后就回到了初始状态，具体做法是在 vuex 里数据改变的时候把数据拷贝一份保存到 localStorage 里面，刷新之后如果 localStorage 里有保存的数据，取出来再替换 store 里的 state。

Vuex是实现组件全局状态(数据)管理的一种机制

可以方便的实现组件之间数据的共享

使用 Vuex 统一管理状态的好处：

• 能够在 Vuex 中集中管理共享的数据，易于开发和后期维护

• 能够高效的实现组件之间的数据共享，提高开发效率

• 存储在 Vuex 中的数据都是响应式的，能够实时保持数据与页面的同步

什么样的数据适合存储到 Vuex 中

一般情况下，只有组件之间共享的数据，才有必要存储到 Vuex 中；对于组件的私有数据，依旧存储在组件自身的 data 中即可。

• 多个视图依赖于同一个状态：例如多组件之间数据共享，在不同页面都可以拿到用户信息

• 来自不同视图的行为需要改变同一个状态：比如用户会员信息，在不同页面可以更改

Vuex的基本使用

1. 安装Vuex依赖包