Vue学习笔记——vuex

Vuex是一个专为Vue.js应用程序开发的状态管理模式,它集中管理Vue组件的状态,并提供了actions、mutations和getters等机制进行状态变更。当多个组件需要共享和修改同一状态时,或者需要进行异步操作时,通常使用Vuex。其核心概念包括state(存储状态)、actions(触发state改变的异步操作)、mutations(同步更新state)、getters(计算属性,从state派生数据)和modules(模块化管理,用于大型项目)。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

5.1.理解vuex

5.1.1.vuex是什么

  1. 概念:专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。
  2. Github地址:https://github.com/vuejs/vuex

5.1.2.什么时候使用vuex

  1. 多个组件依赖于同一状态
  2. 来自不同组件的行为需要变更同一状态

5.1.3.案例

在这里插入图片描述

5.1.4.Vuex工作原理图

在这里插入图片描述

5.2.vuex核心概念和API

5.2.1.state

  1. vuex管理的状态对象
  2. 他应该是唯一的
  3. 示例代码:
const state={
	xxx:initValue
}

5.2.2.actions

  1. 值为一个对象,包含多个响应用户动作的回调函数
  2. 通过commit()来触发mutation中函数的调用,间接更新state
  3. 如何触发actions中的回调?
    在组件中使用:
$store.dispatch('对应的 action 回调名')

触发

4.可以包含异步代码(定时器,ajax等等)
5.示例代码:

const actions={
    zzz({commit,state},data1){
        commit('yyy',{data1})
    }
}

5.2.3.mutations

  1. 值是一个对象,包含多个直接更新state的方法

  2. 谁能调用mutations中的方法?如何调用?
    在action中使用:commit(‘对应的mutations方法名’) 触发

  3. mutations中方法的特点:不能写异步代码、只能单纯的操作stata

  4. 示例代码:

const mutations={
    yyy(state,{data1}){
        //更新state的某个属性
    }
}

5.2.4.getters

  1. 值为一个对象,包含多个用于返回数据的函数
  2. 如何使用?——$store.getters.xxx
  3. 示例代码:
const getters={
    mmm(state){
        return state.msg+'!'
    }
}

5.2.5.modules

  1. 包含多个module
  2. 一个module是一个store的配置对象
  3. 与一个组件(包含有共享数据)对应
### 关于FastAPI和Vue3的学习教程与笔记 #### 使用FastAPI构建后端服务 为了创建一个基于FastAPI的Web应用,开发者可以利用其简洁而强大的特性来快速搭建RESTful API。下面是一个简单的例子,展示了如何设置带有跨源资源共享(CORS)中间件的基础应用程序[^4]。 ```python from fastapi import FastAPI from fastapi.middleware.cors import CORSMiddleware app = FastAPI() # 添加CORS中间件允许所有来源访问API app.add_middleware( CORSMiddleware, allow_origins=["*"], allow_credentials=True, allow_methods=["*"], allow_headers=["*"] ) @app.get("/") async def read_root(): return {"message": "Hello World"} if __name__ == "__main__": import uvicorn uvicorn.run(app, host="0.0.0.0", port=8000) ``` 这段代码定义了一个基本的应用实例`app`并配置了必要的中间件以支持来自不同域的请求。通过装饰器`@app.get("/")`指定了根路径处理程序返回一条消息给客户端。 #### 利用Vue3设计前端界面 对于前端部分,则推荐采用现代JavaScript框架之一——Vue.js版本3来进行单页面应用程序(SPA)的设计工作。这里给出一段HTML模板以及相应的脚本片段用于初始化一个新的Vue项目: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>My App</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app">{{ message }}</div> <!-- 创建Vue实例 --> <script type="module"> import { createApp } from 'vue' createApp({ data() { return { message: 'Welcome to your new Vue application!' }; } }).mount('#app') </script> </body> </html> ``` 此示例中引入了最新版的Vue库文件,并通过ES模块语法动态加载它;接着声明了一个名为`app`的对象作为视图模型(View Model),其中包含了要绑定到DOM中的属性(`message`)及其初始值;最后调用了`.mount()`方法指定挂载点从而启动整个SPA生命周期。 #### 结合FastAPI与Vue3的最佳实践建议 当考虑将这两个工具链结合起来时,有几个方面值得注意: - **前后端分离架构**:保持清晰的服务层划分有助于团队协作分工明确; - **状态管理解决方案的选择**:针对复杂的状态逻辑可以选择Vuex或其他类似的库; - **HTTP通信协议**:通常会选用Axios发起异步请求并与服务器交互获取资源; - **安全性考量**:确保传输过程加密(HTTPS)、身份验证机制健全等措施保障信息安全[^1]。 #### 实战经验分享 根据实际案例分析,在学习过程中采取边做边学的方式往往能取得更好的效果。比如可以从模仿现有优秀作品入手,逐步理解各个知识点之间的联系,再尝试独立完成小型项目积累更多实践经验。此外,积极参与社区讨论也是不可或缺的一环,这不仅能够帮助解决遇到的具体难题,更能拓宽视野接触到最新的行业趋势和技术动向[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值