首页 > 编程知识 正文

vuex在项目中怎么用,vue中vuex的用法

时间:2023-05-04 15:29:09 阅读:272708 作者:1243

Vuex是什么?Vuex能做什么?Vuex怎么使用?
1、Vuex是什么?哪种功能场景使用它?

2、Vuex有哪几种属性?
3、使用Vuex的好处?
4、使用Vuex示例。

见下文、

Vuex是什么?哪种功能场景使用它?

1、Vuex是什么?

Vuex是一个专门为vue.js应用程序开发的状态管理模式

简单的说:Vuex是vue框架中状态管理。

这里就又出现一个问题:那什么是“状态管理模式”?

什么是“状态管理模式”?
把组件的共享状态抽取出来,以一个全局单例模式管理。在这种模式下,我们的组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为!这就是“状态管理模式”。

2、Vuex有什么 好处?及使用场景

好处:单页应用中,组件之间的数据状态。可以做状态管理、采用localstorage保存信息、数据一直存储在用户的客户端中
使用场景:(1)登录信息、(2)购物车、(3)复杂的组件通信

3**、介绍Vuex的核心属性概念及其作用**

核心概念:
state状态、
getter计算属性、
mutation改变状态、
action异步操作、
module模块

Vuex的State特性

1、Vuex就是一个仓库,仓库里面放了很多对象。其中state就是数据源存放地,对应于一般Vue对象里面的data

2、state里面存放的数据是响应式的,Vue组件从store中读取数据,若是store中的数据发生改变,依赖这个数据的组件也会发生更新

3、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

Vuex的Getter特性

1、getters 可以对State进行计算操作,它就是Store的计算属性

2、虽然在组件内也可以做计算属性,但是getters 可以在多组件之间复用

3、如果一个状态只在一个组件内使用,是可以不用getters

Vuex的Mutation特性
Action 类似于 mutation,不同在于:Action 提交的是 mutation,而不是直接变更状态;Action 可以包含任意异步操作。

Vuex的Module特性
Module 可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。

4、Vuex中如何异步修改数据

(1)同步更改mutations
(2)异部更改action,action中通过commit触发mutations进行state数据更改
(3).页面中触发action中函数

使用Vuex的好处?

1、多层嵌套的组件、兄弟组件间的状态会更好管理维护。
2、缓存一些当前要使用请求远程或本地的数据集(刷新后会自己销毁)。
3、有了第二条,就可以减少向服务器的请求,节省资源。如果你的用户足够多,那么每多出一个请求,对公司来说,都是一大笔钱。
4、对开发者来说,如果你的项目足够复杂,团队的规模也不仅是一个人,数据集中处理更利于程序的稳定和维护。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。