前端学习——vuex的入门

学习一门技术最快捷的方式就是先了解其概念和使用场景,毕竟任何技术的出现都是为了解决某一个场景下的通用解决方案,并且使用最合理的方式去解决问题。

那么什么是vuex?

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

这是vuex官网给的关于vuex的概念,翻译成白话就是一个状态(数据)管理的库,类似于数据库。

其产生的场景是解决vue组件之间的数据共享问题,因为每个组件都有其自身需要操作的数据,比如用户组件需要操作用户数据,订单组件需要操作订单数据,但不同组件之间有可能会涉及到一些公共到数据,比如用户组件和订单组件都需要用到用户的唯一标识。

这时如果每个组件都维护一份用户唯一标识的数据虽然也可以,但会出现大量的重复数据和重复代码,不符合组件开发的思想。

所以,vue就提供了一个统一组件数据管理的工具,就是vuex,其功能就类似于一个数据库,在vue的组件开发中,把一些通用的数据操作统一使用vuex进行管理,比如后端开发中就把数据全部放在数据库中,业务逻辑根据不同的场景去调用数据库获取数据。

如下图所示,app是一个vue项目,里面有多个组件模块A,B,C,D,而vuex是独立于app模块的一个独立功能,里面保存的就是各个组件中需要使用的数据。

 怎么使用vuex 

使用vuex 需要先使用npm 安装vuex 并且在vue对象中使用Vue.use(vuex).以下是vuex官网提供的vuex 的运行逻辑图

创建vuex.store 创建vuex实例:

在main.js中,把vuex的store 和 vue对象进行绑定。效果如下图:

这时就可以像调用其他vue对象属性一样,调用store仓库。

this.$store.dispatch/commit/等。

相关推荐

  1. 前端学者 CSS 入门

    2023-12-25 04:04:02       10 阅读
  2. vue前端学习笔记

    2023-12-25 04:04:02       40 阅读
  3. 前端小白学习之路(Vue2 一)

    2023-12-25 04:04:02       9 阅读
  4. 前端小白学习之路(Vue2 二)

    2023-12-25 04:04:02       12 阅读
  5. 前端学习记录】Vue前端规范整理

    2023-12-25 04:04:02       40 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-25 04:04:02       14 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-25 04:04:02       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-25 04:04:02       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-25 04:04:02       18 阅读

热门阅读

  1. 阻断血缘关系以及checkpoint文件清理

    2023-12-25 04:04:02       38 阅读
  2. python常用函数汇总

    2023-12-25 04:04:02       31 阅读
  3. go从0到1项目实战体系二十三:GORM

    2023-12-25 04:04:02       22 阅读
  4. C语言使用qsort和bsearch实现二分查找

    2023-12-25 04:04:02       39 阅读
  5. C++:第十讲二分查找

    2023-12-25 04:04:02       37 阅读
  6. 7-2 非递归二路归并排序

    2023-12-25 04:04:02       35 阅读
  7. 超酷的爬虫可视化界面

    2023-12-25 04:04:02       35 阅读