什么是vuex? 什么场景下适用vuex?

Posted restart77

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了什么是vuex? 什么场景下适用vuex?相关的知识,希望对你有一定的参考价值。

问题一:什么是vuex?

回答:Vuex 是一个专为 Vue.js 应用程序开发的状态管理器,采用 集中式存储 管理应用的所有组件的状态。

   每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。

Vuex 和单纯的全局对象有以下两点不同:(重点)

1、Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
2、你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

vuex的核心概念和核心概念图:

技术图片

1、state - Vuex store实例的根状态对象,用于定义共享的状态变量。
2、Action -动作,向store发出调用通知,执行本地或者远端的某一个操作(可以理解为store的methods)
3、Mutations -修改器,它只用于修改state中定义的状态变量。
4、getter -读取器,外部程序通过它获取变量的具体值,或者在取值前做一些计算(可以认为是store的计算属性)

详解:


概念:
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用 集中式存储 管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

解决的问题:

有了vue-router,可以将一个组件视为一个页面来使用。由于组件只维护自身的状态(data),组件创建时或者说进入路由时它们被初始化,切换至其他的组件页时当前页自然要被销毁,从而导致data也随之销毁。

页面与页面之间总会产生各种需要的共享变量,如果通过$router.param或者$router.meta来传递是远远不够的,很多情况下不得不采用window来保存一些全局的共享变量。

这样出现的问题:vue是不会维护window的这些共享变量的。对于组件来讲,这些变量都存在于组件作用域以外,组件并不会自动维护,这样就违背了js编程规范或者风格规范的一条基本准则:全局变量是毒瘤,是具有极高副作用的。

当我们将window内的对象绑定到不同的自定义组件内,一旦要对window内的变量进行修改,会发现所有以对象方式绑定的自定义组件,当对象内的某个属性发生改变时将不会执行自动刷新,所有的计算属性也同时失效!更诡异的是这种情况并不是绝对出现的,当页面元素相对简单的时候一切都显得很正常,一旦页面元素增多,对应的交互操作增多时,这种奇怪的现象就会发送。

vuex就是专门解决页面与页面之间需要的共享变量的创建、维护、变更问题的。

以上是关于什么是vuex? 什么场景下适用vuex?的主要内容,如果未能解决你的问题,请参考以下文章

深入Vue底层,手写一个vuex

深入Vue底层,手写一个vuex

深入Vue底层,手写一个vuex

深入Vue底层,手写一个vuex

Vuex

我啥时候应该使用 Vuex?