Vuex的用法及组成部分

1.Vuex是什么？

借鉴了Flux、Redux、 The Elm Architecture
Vuex是专为vue.js设计的状态管理模式。
集中式存储和管理应用程序中所有组件的状态
Vuex 也集成到 Vue 的官方调试工具
一个 Vuex 应用的核心是 store（仓库，一个容器），store包含着你的应用中大部分的状态 (state)
2.什么情况下我应该使用 Vuex？
不适用：小型简单应用，用 Vuex 是繁琐冗余的，更适合使用简单的 store 模式。
适用于：中大型单页应用，你可能会考虑如何把组件的共享状态抽取出来，以一个全局单例模式管理，不管在哪个组件，都能获取状态/触发行为，解决问题如下：

① 多个视图使用于同一状态：
传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力

② 不同视图需要变更同一状态：
采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝，通常会导致无法维护的代码

3.Vuex组成部分：
state:进行组件共享数据的集中存储{}
getters:原理computed 用于返回最新的数据值{计算属性写法}
mutations:唯一一个能够修改state里面数据的地方-（函数）-不能做异步
actions:处理异步请求-异步调用mutations函数
modules:模块当数据比较多的情况下，而且数据之前没有什么关系，用模块划分，每一个模块对象都包含以上4部分
同时提供了3个对象：
mapState:mapState对象辅助操作state,拿到state里的一些数据
mapGetters:mapGetters辅助操作getters通过计算属性返回的一些新的数据值
mapActions：mapActions辅助操作actions函数的调用

commit 同步调用mutations方法
disptatch 异步调用actions方法

3.使用
安装：
npm i vuex --save-dev
创建一个目录store然后配置个主文件index.js

可以直接在index.js里写那5部分，但是为了后期好管理，可以写成单独的文件。
有几大组成部分就建几个js文件
state里放数据的，var一个对象然后在暴露出去

用state要把它接过来并且挂载到vuex对象上。
mutations是操作state数据的，直接把state传到函数中就能解析

再把mutations引入到index.js中。

由于需要对vue的实例化对象操作，需要在vue主文件中去

获取数据的话有来种方式：
要在页面展示数据可以直接取：

还有一种就是间接取（通过mapState）：

用这个方法需要把通过vuex中引进过来

需要在computed这个计算属性中来获取数据，因为state有多个数据，用扩展运算符接收并用数组存

操作数据mutations

通过comit()来调用mutations里的函数

getters的操作，声明好了以后，也需要挂载到index.js上。

getters的数据获取（mapGetters）

actions是对mutations里事件和数据做异步操作的（actions里操作的事件要和mutations里的一致，调用mutations里的函数都是通过commit()）：

用的话直接起事件相同的名字，都要借助mapActions

因为属于事件行为，所以和methods相关，所以要写到methods中

actions有第二种方法，通过dispatch（）的方法调用；

modules的数据获取，modules是当数据过多是可以分成很多模块管理；

modules里面的state直接获取数据不一样，其他的都是一样的：

Vuex的用法及组成部分相关推荐

vuex的计算属性_vue中vuex的五个属性和基本用法
VueX 是一个专门为 Vue.js 应用设计的状态管理构架,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data ). Vuex有五个核心概念: state, ge ...
Vue中Vuex的五个属性和基本用法
一.Vuex的五个核心概念:state.getters.mutations.actions.modules 1.state: vuex的基本数据,用来存储变量: 2.getters: 从基本数据(st ...
vuex保存用户信息_Vuex状态管理
一个组件可以分为数据和视图,数据更新时,视图也会自动更新.在视图中又可以绑定一些事件,它们触发methods里面指定的方法,从而又可以改变数据.更新视图,这就是一个组件基本的运行模式. 但实际的业务中 ...
【vue2.0进阶】案例：用Vuex实现一个简单的计算器
昨天我们学习了Veux的几个重要的核心概念.当然只讲概念还不够,必须要结合上案例才能理解得更深刻. 马上就开始我们今天的案例:用Vuex实现一个简单的网页计算器. 我们之前的章节说过,Vuex适合在较 ...
typescript 判断异步执行已经结束_vue进阶系列——用typescript玩转vue和vuex
用过vue的朋友大概对vuex也不陌生,vuex的官方解释是专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. ...
vuex使用方法（详细实用）
vuex使用方法前言 1.官方文档比较正式详细,但看完之后依然一脸懵逼,不知道具体该怎么使用. 2.本文内容是结合自己在项目开发中总结的比较好用的一种用法. 3.写这篇文章主要目的是为了自己找资料时 ...
vuex原理解析并实现一个简单的vuex
vuex的作用官方 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 个人理解简 ...
【vue2.0进阶】轻松理解Vuex的3个核心概念及简单应用案例(计算器)
Vuex是一个提供状态管理机制,相比使用传统的全局对象,它有两大优点,一个是它的状态存储是响应式的,另一个是要不能随意修改Vuex的状态,必须按照它的规矩来办事.最后也了解了它有适用和不适用的业务场景 ...
vue3 中 vuex 两种方法使用使用用用用用用用用
今天来写一下这个vue3中vuex的用法 1.安装 npm install vuex -S 2.引入这个时候就有两种选择了第一种直接引入store文件 import $store from ...

Vuex的用法及组成部分

Vuex的用法及组成部分

Vuex的用法及组成部分相关推荐

最新文章

热门文章