Vuex基础使用存取值+异步请求后台

目录

一、Vuex简介

1.1 定义

1.2 Vuex关键概念

1.3 使用Vuex的优势

1.4 Vuex中各个js文件的用途

1.5 Vuex各组件

1.5.1 图解

1.5.2 详解

1.6 变量传值的演变形式

 二、Vuex获取值

2.1 安装

2.2 菜单栏

2.3 模块

2.4 引用

三、Vuex改变值

四、Vuex异步&请求后台

4.1 Vuex同步异步详解

4.2 代码编写

4.3 效果展示

五、收获


一、Vuex简介

1.1 定义

Vuex是一个专为Vue.js应用程序开发的状态管理模式与库。它用于管理Vue.js应用程序中的状态(state)和数据流,以确保状态在不同组件之间的一致性和可维护性。Vuex基于Flux和Redux的思想,提供了一种集中管理和跟踪状态变化的机制,特别适用于大型和复杂的前端应用程序。

1.2 Vuex关键概念

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以一种可预测的方式进行状态的变更。以下是 Vuex 的关键概念:

  1. State(状态):

    • State 即应用的状态,是存储在 Vuex 中的数据。在 Vuex 的 store 中,所有的状态都被集中存储。
    • State 是响应式的,当 State 的数据发生变化时,相关的组件将自动更新。
  2. Getter(获取器):

    • Getter 类似于组件中的计算属性。它们的作用是对 Store 中的 State 进行一些处理,然后输出处理后的结果。
    • Getter 可以接受其他 Getter 作为第二个参数。
  3. Mutation(突变):

    • Mutation 是 Vuex 中更改 State 的唯一方式。Mutation 必须是同步函数,用于改变 State 中的数据。
    • 每个 Mutation 都有一个字符串的事件类型(type)和一个回调函数,回调函数就是实际进行状态更改的地方。
    • 在组件中提交 Mutation 的方法是 this.$store.commit('mutationType')
  4. Action(动作):

    • Action 类似于 Mutation,不同之处在于 Action 提交的是 Mutation,而不是直接变更状态。
    • Action 可以包含任意异步操作。通过 Action 可以提交多个 Mutation。
    • 在组件中分发 Action 的方法是 this.$store.dispatch('actionType')
  5. Module(模块):

    • 在大型应用中,单一的 State 树很容易被各种功能模块儿淹没。Module 允许我们将 State 分割成模块,每个模块有自己的 State、Getter、Mutation 和 Action。
    • 模块内部的 Mutation 和 Action 可以接收和操作模块内部的局部状态。

1.3 使用Vuex的优势

使用Vuex的主要优势包括:

  • 集中式管理:Vuex通过单一的存储仓库来管理应用程序的状态,使状态变化可追踪和可维护。

  • 数据共享:可以轻松地在不同的组件之间共享和传递状态数据,而不需要通过组件之间的繁琐的通信手段。

  • 开发工具支持:Vue.js的开发工具提供了对Vuex的强大支持,可以方便地查看状态快照、时间旅行调试等。

  • 可测试性:由于Vuex的状态管理是纯粹的,你可以更容易地编写单元测试来验证你的状态和逻辑。

1.4 Vuex中各个js文件的用途

在一个典型的Vuex项目中,通常会有一些不同的JavaScript文件,每个文件都有特定的用途。以下是这些文件的一般用途:

  1. store.js
    • 用途:这是Vuex的核心文件,包含了Vuex的Store实例的配置和创建。
    • 内容:
      • 导入Vue和Vuex库。
      • 导入模块(如果有多个模块)。
      • 创建Vuex的Store实例,配置state、mutations、actions、getters等。
      • 导出Store实例,以便在Vue应用程序中使用。
  2. state.js(可选):
    • 用途:将应用程序的状态(state)单独抽取到一个文件中,以便更好地组织和维护状态数据。
    • 内容:仅包含应用程序的状态数据。
  3. mutations.js(可选):
    • 用途:将突变(mutations)函数单独抽取到一个文件中,以便更好地组织和维护状态变更逻辑。
    • 内容:包含突变函数,这些函数用于同步修改状态。
  4. actions.js(可选):
    • 用途:将动作(actions)函数单独抽取到一个文件中,以便更好地组织和维护异步操作逻辑。
    • 内容:包含动作函数,这些函数用于执行异步任务并触发突变来修改状态。
  5. getters.js(可选):
    • 用途:将获取器(getters)函数单独抽取到一个文件中,以便更好地组织和维护状态的派生数据。
    • 内容:包含获取器函数,这些函数用于从状态中获取计算属性。
  6. modules/ 文件夹(可选):
    • 用途:当应用程序变得复杂时,可以将Vuex的Store模块化,将不同模块的状态、突变、动作和获取器分别放在不同的文件中,以便更好地组织和管理代码。
    • 内容: 包含不同模块的state.jsmutations.jsactions.jsgetters.js等文件,用于组织和管理不同模块的代码。

以上文件的具体结构和文件名可以根据项目的需求和组织方式来定制,但这种组织方式有助于保持代码的可维护性和可读性,并更好地分离关注点。

1.5 Vuex各组件

1.5.1 图解

1.5.2 详解

在一个Vue.js应用程序中,通过Vuex进行状态管理时,通常涉及多个组件。以下是一些常见的Vuex组件的角色和功能:

  1. 根组件(Root Component)

    • 角色: 通常是Vue应用的根组件,如App.vue。
    • 功能: 作为整个应用的入口点,可以在根组件中通过this.$store来访问和传递状态。
  2. 容器组件(Container Components)

    • 角色: 也称为Smart组件或父组件,通常包含了子组件,并负责管理状态。
    • 功能: 负责获取状态、触发动作、将状态传递给子组件,并监听状态变化以更新子组件。
  3. 展示组件(Presentational Components)

    • 角色: 也称为Dumb组件或子组件,通常只关心UI呈现和用户交互。
    • 功能: 接收父组件传递的状态和方法,负责呈现数据和用户界面。
  4. Getter组件(Getter Components)

    • 角色: 特殊的子组件,专门用于获取Vuex的Getter中的数据。
    • 功能: 通过计算属性或方法获取派生数据,然后呈现在UI中。
  5. Mutation组件(Mutation Components)

    • 角色: 特殊的子组件,专门用于触发Vuex的Mutation以修改状态。
    • 功能: 通常包含按钮或表单,当用户执行某个操作时,触发Mutation来更新状态。
  6. Action组件(Action Components)

    • 角色: 特殊的子组件,专门用于触发Vuex的Action以执行异步操作。
    • 功能: 通常包含表单或交互,当用户需要执行异步操作时,触发Action来执行复杂逻辑并更新状态。

这些组件之间的交互和关系构成了一个完整的Vue.js应用程序,其中状态由Vuex进行管理。容器组件负责连接Vuex Store和展示组件,Getter组件用于获取状态,Mutation组件用于修改状态,而Action组件用于执行异步操作。根组件通常是整个应用的入口点,并将状态传递给容器组件。这种组件分层结构有助于代码的组织和维护,以及更好的可维护性和可测试性。

1.6 变量传值的演变形式

 二、Vuex获取值

2.1 安装

下载Vuex,指令代码如下:

npm install vuex -S

npm i -S vuex@3.6.2

注:mockjs版本不同,所需执行的下载安装指令也相对应不同。 

下载过程:

出现版本号即安装成功:

安装完成之后,开始进行代码优化。

注:本篇博客是基于上篇博客代码的基础上优化的,详情请点击:

Kissship的博客ElementUI之CUD+表单验证icon-default.png?t=N7T8https://blog.csdn.net/weixin_74263417/article/details/133344819?spm=1001.2014.3001.5501

2.2 菜单栏

在src中创建一个vuex的目录,在改目录下创建两个组件page1,page2

代码如下:

page1:

<template><div style="padding: 60px;"><h1>刘三金的羁绊</h1><p>改变state中的值</p>请输入你的初恋:<input v-model="msg" /><button @click="fun1">获取state</button><button @click="fun2">改变state</button></div>
</template><script>
export default {data() {return {msg: '默认值'};},methods: {fun1() {// 获取 Vuex 中的 eduName 状态let eduName = this.$store.state.eduName;alert(eduName);},fun2() {// alert(this.msg)// 提交一个名为 setEduName 的 mutation 来更改 eduName 状态this.$store.commit('setEduName', {eduName: this.msg});}}
}
</script><style>
</style>

page2:

<template><div><h1>死亡丧彪</h1>{{eduName}}</div>
</template><script>
export default {data() {return {msg: '默认值'}},computed: {eduName() {// 从 Vuex store 中获取 eduName 的值return this.$store.state.eduName;}}
}
</script><style>
/* 在这里添加组件的样式 */
</style>

到项目中src的router的index.js文件中配置路径,如下:

import page1 from '@/Views/vuex/page1'
import page2 from '@/Views/vuex/page2'
{path: '/vuex/page1',name: 'page1',component: page1},{path: '/vuex/page2',name: 'page2',component: page2}

在src中的components的LeftNav.vue组件中编辑(增加)代码,如下:

<el-submenu index="idx_999" key="idx_999"><template slot="title"><span>vuex管理</span></template><el-menu-item index="/vuex/page1" key="idx_99901"><span>页面1</span></el-menu-item><el-menu-item index="/vuex/page2" key="idx_99902"><span>页面2</span></el-menu-item></el-submenu>

2.3 模块

在项目中创建store目录分别维护state/actions/mutations/getters/store

state.js:

export default{eduName:'死亡60HZ的支配',aname:'',bname:''
}

mutations.js:

export default {setEduName: (state, payload) => {//state指的就是state.js文件中导出的对象//payload就是vue文件传递过来的参数// A.Vue name  {a_name:this.name}// B.Vue name  {b_name:this.name}// state.aname = payload.a_name;// state.bname = payload.b_name;state.eduName = payload.eduName;}
}

getters.js:

export default {getEduName: (state) => {return state.eduname;}
}

actions.js 先不写代码。

index.js:

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import actions from './actions'
import mutations from './mutations'
Vue.use(Vuex)
const store = new Vuex.Store({state,getters,actions,mutations})export default store

2.4 引用

在src中的main.js进行引用,如下:

import store from './store'/* eslint-disable no-new */
new Vue({el: '#app',router,store,data(){return{Bus:new Vue()}},components: { App },template: '<App/>'
})

然后取值操作在前面的page1页面中已经写完了,接下来我们进行效果展示,如下:

三、Vuex改变值

page1:

<template><div style="padding: 60px;"><h1>刘三金的羁绊</h1><p>改变state中的值</p>请输入你的初恋:<input v-model="msg" /><button @click="fun1">获取state</button><button @click="fun2">改变state</button></div>
</template><script>
export default {data() {return {msg: '默认值'};},methods: {fun1() {// 获取 Vuex 中的 eduName 状态let eduName = this.$store.state.eduName;alert(eduName);},fun2() {// alert(this.msg)// 提交一个名为 setEduName 的 mutation 来更改 eduName 状态this.$store.commit('setEduName', {eduName: this.msg});}}
}
</script><style>
</style>

执行结果如下:

四、Vuex异步&请求后台

4.1 Vuex同步异步详解

Vuex 是一个用于管理 Vue.js 应用程序状态的状态管理模式和库。在 Vuex 中,操作可以分为同步和异步操作,这两种操作类型在应用程序状态管理中起到不同的作用。以下是对 Vuex 同步和异步操作的详细解释:

  • 同步操作:

同步操作是指立即执行并修改应用程序状态的操作。在 Vuex 中,这通常通过 mutations 来实现。Mutations 是用于修改状态的函数,它们必须是同步的,这意味着它们不应该包含异步代码。当你需要在应用程序中执行一些立即生效的状态变更时,同步操作是非常有用的。

  • 异步操作:

异步操作是指可能需要一些时间来执行的操作,例如数据获取、网络请求、或其他需要等待的任务。在 Vuex 中,这通常通过 actions 来处理。Actions 是用于分发异步任务的函数,它们可以包含异步代码,例如异步 API 调用,然后在异步操作完成后提交 mutations 来修改状态。

异步操作适用于需要等待的任务,因为它们不会阻塞应用程序的其他操作,使得应用可以继续响应用户的输入。你可以在异步操作中使用异步 JavaScript 特性,如 Promises 或 async/await,来管理异步代码。

总结:

  • 同步操作用于立即修改状态,是直接的、快速的操作。
  • 异步操作用于处理需要等待的任务,例如网络请求、数据获取等。异步操作通过 actions 来触发,可以包含异步代码,并在异步操作完成后提交 mutations 来更新状态,以确保状态的一致性。

4.2 代码编写

在page1.vue组件中编写所有代码,page1代码如下:

<template><div style="padding: 60px;"><h1>刘三金的羁绊</h1><p>改变state中的值</p>请输入你的初恋:<input v-model="msg" /><button @click="fun1">获取state</button><button @click="fun2">改变state</button><button @click="fun3">异步改变state</button><button @click="fun4">请求后台</button></div>
</template><script>export default {data() {return {msg: '默认值'};},methods: {fun1() {// 获取 Vuex 中的 eduName 状态let eduName = this.$store.state.eduName;alert(eduName);},fun2() {// alert(this.msg)// 提交一个名为 setEduName 的 mutation 来更改 eduName 状态this.$store.commit('setEduName', {eduName: this.msg});},fun3() {this.$store.dispatch('setEduNameAsync', {eduName: this.msg});},fun4() {this.$store.dispatch('setEduNameAjax', {eduName: this.msg,_this:this});}}}
</script><style>
</style>

在page2.vue组件中编写所有代码,page2代码如下:

<template><div><h1>死亡丧彪</h1>{{eduName}}</div>
</template><script>
export default {data() {return {msg: '默认值'}},computed: {eduName() {// 从 Vuex store 中获取 eduName 的值return this.$store.state.eduName;}}
}
</script><style>
/* 在这里添加组件的样式 */
</style>

在src的action.js中配置后台请求的地址,如下:

'VUEX_AJAX': 'vuex/queryVuex', //Vuex的后台异步请求

在src的store模块中编写actions.js,如下:

export default {setEduNameAsync: (context, payload) => {//context指的是Vuex的上下文setTimeout(function() {context.commit('setEduName', payload);}, 10000); //十秒后执行},setEduNameAjax: (context, payload) => {let _this = payload._this;//this并不代表vue实例let url = _this.axios.urls.VUEX_AJAX;let params = {resturantName:payload.eduName}_this.axios.post(url, params).then(r => {console.log(r);}).catch(e => {})}
}

4.3 效果展示

异步效果展示如下:

请求后台效果如下:

五、收获

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它可以帮助你管理应用程序的状态并确保状态的一致性,尤其在大型或复杂的应用程序中更为重要。使用 Vuex 进行状态管理可以带来许多好处,尤其是对于值的改变和异步操作。

  1. 一致性的状态管理: Vuex 提供了一个单一的状态树,即存放在一个地方的状态使得应用的所有组件可以访问和共享状态。这确保了应用的状态保持一致,避免了在不同组件中可能出现的状态不一致性问题。

  2. 易于跟踪和调试: 由于所有状态都集中在一个地方,因此更容易跟踪状态的变化,这对于调试和排查错误非常有用。你可以轻松地监控状态的变化,了解数据如何随时间变化。

  3. 中心化管理数据流: Vuex 将数据的流向、修改和维护集中到一个地方,而不是分散在多个组件中。这使得数据流变得可预测和易于理解,有助于应用程序的维护和扩展。

  4. 简化组件间通信: 通过 Vuex,组件之间的通信变得简单明了。你可以通过提交(mutations)和分发(actions)来修改状态,而不必通过多层嵌套的组件传递数据。

  5. 异步操作的便利性: 在 Vuex 中处理异步操作变得更为优雅。你可以在 actions 中发起异步操作,然后在操作完成后再提交(mutations)来更新状态。这使得管理异步行为更加清晰和有序。

  6. 适用于大型应用: 对于大型应用程序,特别是需要处理复杂状态和多组件交互的应用,使用 Vuex 可以更好地组织代码、分离关注点,从而使得应用程序更容易维护和扩展。

总的来说,Vuex 中的改变值和异步操作的使用可以让你更好地管理应用程序的状态,确保一致性、易于调试和拓展,并提高代码的清晰度和可维护性。


最后Vuex基础使用存取值+异步&请求后台就到这里,祝大家在敲代码的路上一路通畅!

感谢大家的观看 !

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/101183.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ACK 云原生 AI 套件:云原生 AI 工程化落地最优路径

作者&#xff1a;胡玉瑜(稚柳) 前言 在过去几年中&#xff0c;人工智能技术取得了突飞猛进的发展&#xff0c;涵盖了机器学习、深度学习和神经网络等关键技术的重大突破&#xff0c;这使得人工智能在各个领域都得到广泛应用&#xff0c;对各行各业产生了深远的影响。 特别值…

计算机视觉处理的开源框架

计算机视觉是一门涉及图像和视频分析的领域&#xff0c;有许多开源的框架和库可用于构建计算机视觉应用程序。以下是一些常见的计算机视觉开源框架及其特点&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合…

地级市HVV | 未授权访问合集

在网站前后端分离盛行下&#xff0c;将大部分权限控制交给前端&#xff0c;导致js中隐藏未授权或者可绕过的前端鉴权。前后端分离的好处是提高开发效率&#xff0c;同时防止黑客更直接的对服务器造成危害&#xff0c;但权限控制的工作量全部交给前端会导致大量页面未授权或者后…

Flink---12、状态后端(HashMapStateBackend/RocksDB)、如何选择正确的状态后端

星光下的赶路人star的个人主页 大鹏一日同风起&#xff0c;扶摇直上九万里 文章目录 1、状态后端&#xff08;State Backends&#xff09;1.1 状态后端的分类&#xff08;HashMapStateBackend/RocksDB&#xff09;1.2 如何选择正确的状态后端1.3 状态后端的配置 1、状态后端&am…

香港专用服务器拥有良好的国际网络连接

香港服务器在多个领域有着广泛的应用。无论是电子商务、金融交易、游戏娱乐还是社交媒体等&#xff0c;香港服务器都能够提供高效稳定的服务。对于跨境电商来说&#xff0c;搭建香港服务器可以更好地满足亚洲用户的购物需求&#xff1b;对于金融机构来说&#xff0c;香港服务器…

力扣第98题 验证二叉搜索树 c++ 与上一篇文章相似

题目 98. 验证二叉搜索树 中等 相关标签 树 深度优先搜索 二叉搜索树 二叉树 给你一个二叉树的根节点 root &#xff0c;判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下&#xff1a; 节点的左子树只包含 小于 当前节点的数。节点的右子树只包含 大于 当…

如何在小程序中设置导航栏文字颜色和背景颜色

不同商家有不同的颜色风格&#xff0c;例如有些做设计的公司&#xff0c;主要是黑色风格&#xff1b;有些卖珠宝的商家&#xff0c;主要是金色风格&#xff1b;他们的小程序&#xff0c;也需要进行同样的风格设定。下面具体介绍怎么在小程序中进行整个风格设定。 1. 在小程序管…

Gooxi国鑫搭载第四代英特尔至强可扩展处理器系列服务器焕新登场

由算力驱动的数字经济渗透到了百行千业&#xff0c;在驱动传统经济转型升级和效能优化的同时&#xff0c;也大幅度增加了各行业数据处理能力的需求 。 面对千行百业加速创新应用和AIGC时代像潮水一样奔涌算力需求&#xff0c;得益于第四代英特尔至强可扩展处理器以及基于Gooxi最…

MySQL之MHA高可用配置及故障切换实例

MySQL之MHA高可用配置及故障切换实例 1、MHA概述1.1MHA 是什么1.2、MHA 的组成1.3MHA 的特点 2、MHA搭建准备2.1实验思路2.2实验准备 3、MHA搭建的步骤3.1配置主从复制3.2安装 MHA 软件3.3故障模拟 1、MHA概述 1.1MHA 是什么 MHA&#xff08;MasterHigh Availability&#xf…

大端字节序存储 | 小端字节序存储介绍

为什么存储的顺序有些变动呢&#xff1f; 大小端的介绍 我们在创建变量时&#xff0c;操作系统就会给你分配空间&#xff0c;比如你创建了【short/int/double/float】的变量&#xff0c;这些变量的类型都是大于1个字节的&#xff0c;操作系统会根据你这个变量的类型&#xff…

虹科分享 | 想买车无忧?AR为您带来全新体验!

新能源汽车的蓬勃发展&#xff0c;推动着汽车行业加速进行数字化变革。据数据显示&#xff0c;全球新能源汽车销售额持续上升&#xff0c;预计到2025年&#xff0c;新能源汽车市场规模将达到约 4200亿美元&#xff0c;年复合增长率超过 30%。这表明消费者对清洁能源出行的需求不…

AIGC AI绘画 Midjourney 参数大全详细列表

AIGC ChatGPT 职场案例 AI 绘画 与 短视频制作, Power BI 商业智能 68集, 数据库Mysql8.0 54集 数据库Oracle21C 142集, Office 2021实战, Python 数据分析, ETL Informatica 案例实战 Excel 2021实操,函数大全,图表大全,大屏可视化制作 加技巧500集 数据分析可视化T…

Android 13 骁龙相机点击拍照流程分析(一)——点击拍照到更新到左下角缩略图

一.背景 由于最近客户定制需要将文件挂载类型修改为sdcardfs,由于修改了文件挂载类型,导致了骁龙相机拍照后不能点击进入相册,故对骁龙相机从点击事件开始进行问题的排查,此处不介绍最终的sdcardfs挂载后的问题解决方案 二.流程介绍 拍照的流程大概分为几个阶段:打开相机…

【MySql】mysql之进阶查询语句

目录 一、常用查询 1、order by按关键字排序❤ 1.1 升序排序 1.2 降序排序 1.3 结合where进项条件过滤再排序 1.4 多字段排序 2、and和or判断 2.1 and和or的使用 2.2 嵌套、多条件使用 3、distinct 查询不重复记录 4、group by 对结果进行分组 5、limit限制结果…

深度学习笔记之优化算法(五)AdaGrad算法的简单认识

深度学习笔记之优化算法——AdaGrad算法的简单认识 引言回顾&#xff1a;动量法与Nesterov动量法优化学习率的合理性AdaGrad算法的简单认识AdaGrad的算法过程描述(2023/10/10)补充&#xff1a;AdaGrad示例代码 引言 上一节对 Nesterov \text{Nesterov} Nesterov动量法进行了简…

算法题:买卖股票的最佳时机 II (贪心算法解决股票问题)

这道题是贪心算法的中级难度练习题&#xff0c;由于题目设定&#xff0c;整个价格都是透明的&#xff0c;这里并不涉及需要预测股票涨势的问题。解决思路不难&#xff0c;就是一旦股票价格开始下降了就买入&#xff0c;一旦上升了&#xff0c;就赶紧卖出。&#xff08;完整题目…

SpringBoot 如何使用 Grafana 进行可视化监控

使用Spring Boot Sleuth进行分布式跟踪 在现代分布式应用程序中&#xff0c;跟踪请求和了解应用程序的性能是至关重要的。Spring Boot Sleuth是一个分布式跟踪解决方案&#xff0c;它可以帮助您在分布式系统中跟踪请求并分析性能问题。本文将介绍如何在Spring Boot应用程序中使…

DC2DC电源设计注意事项--1,Feedback

电源采集图如下图 Feedback 采集电压点应该在靠近负载侧。这样可以减少大电流导线导致的电压差&#xff0c;真实反应输出电压值 FB_1P21采集电路靠近芯片侧&#xff0c; 2.1&#xff0c;采集分压电路上侧为Vout Vnoise, 那么一分压就噪声就小了。假如采集电路远离芯片侧&…

CSS学习基础知识

CSS学习笔记 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width,…

Java-Atomic原子操作类详解及源码分析,Java原子操作类进阶,LongAdder源码分析

文章目录 一、Java原子操作类概述1、什么是原子操作类2、为什么要用原子操作类3、CAS入门 二、基本类型原子类1、概述2、代码实例 三、数组类型原子类1、概述2、代码实例 四、引用类型原子类1、概述2、AtomicReference3、ABA问题与AtomicStampedReference4、一次性修改&#xf…