vue详解_vuex getters
Vue 详解 Vuex getters
2023-06-13 09:12:44 时间
Vuex是做什么的?
- 官方解释:
Vuex
是一个专为Vue.js
应用程序开发的状态管理模式。- 它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex
也集成到Vue
的官方调试工具devtools extension (opens new window)
,提供了诸如零配置的time-travel
调试、状态快照导入导出等高级调试功能。
- 状态管理到底是什么?
- 状态管理模式,集中式状态管理这些名词听起来就非常高大上,让人捉摸不透
- 其实你可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象中
- 然后,将这个对象放在顶层的
Vue
实例中,让其他组件可以使用 - 那么,多个组件是否可以共享这个对象中的所有变量属性了呢?
管理什么状态呢?
- 但是有什么状态需要我们在多个组件中共享的呢?
- 如果你做过大型项目,你一定遇到过多个状态,在多个界面中共享的问题
- 比如用户的登录状态、头像、信息、地理位置等等
- 比如商品的收藏,购物车中的物品等等
- 这些状态信息,我们都可以放在同一的地方,对它进行保存和管理,而且它们还是响应式的
单页面状态管理
- 我们知道,要在单个组件中进行状态管理是一件非常简单的事情,我们来看下图
- 图中的3个状态,解释如下:
State
:就是我们的状态(姑且可以当做是data
中的属性);VIew
:视图层,可以针对state的变化,显示不同的信息;Actions
,这里的Actions主要是用户的各种操作:点击、输入等等,会导致状态的改变。
代码如下:
new Vue({
// state
data () {
return {
count: 0
}
},
// view
template: `
<div>{{ count }}</div>
`,
// actions
methods: {
increment () {
this.count++
}
}
})
多界面状态管理
- Vue已经帮我们做好了单个界面的状态管理,但如果是多个界面呢?
- 多个视图都依赖同一个状态(一个状态改了,多个界面需要进行更新)
- 不同界面的
Actions
都想修改同一个状态(比如:Home.vue
要修改,Profile.vue
也需要修改这个状态)
- 也就是说对于某些状态(状态1/状态2/状态3)来说只属于我们某一个视图,但是也有一些状态(状态a/状态b/状态c)属于多个视图共同想要维护的
- 状态1/状态2/状态3你放在自己的房间,你自己管理自己用,没问题
- 但是状态a/状态b/状态c我们希望交给一个大管家来统一帮助我们管理
- 那么
Vuex
就是帮助我们统一管理的大管家
- 全局单例模式
- 我们现在要做的就是将共享的状态抽离出来,交给我们的大管家进行统一管理
- 之后,我们的每个视图,按照规定好的规定,进行访问和修改操作
- 这就是
Vuex
背后的思想
Vuex状态管理图例
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/165718.html原文链接:https://javaforall.cn
相关文章
- vueweb端响应式布局_vue响应式原理图文详解「建议收藏」
- Vue父组件向子组件传值之props详解
- html使用vue axios,使用 Vue和axios
- vue使用md5_vuepress在线编辑文档
- vue中怎么解决跨域问题_vue本地访问服务器跨域
- vue中map用法_vue里面的meta用法
- 关于Vue.js的v-for,key的顺序改变,影响过渡动画表现
- 你知道import Vue from 'vue' 吗?
- 拥抱开源,Vue Admin Work后台管理系统免费开源啦
- 尤雨溪凌晨官宣:Vue 3.2 已发布
- Vue-监听使用方法和过滤器
- vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
- Vue全家桶介绍_vue全家桶有什么好处
- vue面试被问到Composition-API响应式包装对象原理
- vue中基本事件的处理 ?
- Vue 生命周期详解
- 初识renren-fast-vue
- Vue路由学习心得详解编程语言
- Vue 实现前后端分离,安全连接 MSSQL 数据库(vue 连接mssql)
- Vue技术实现访问远程Redis的精彩之旅(vue访问远端redis)
- Vue实现Redis订阅消息的实现方案(vue 订阅redis)
- 优化网站性能,Vue搭配Redis缓存更加有效(vue使用redis缓存)
- Vue应用中部署Redis(vue中使用redis)
- Oracle与Vue官网联合宣传前瞻技术,轻松开发(oracle vue官网)