VUEX基本初识

最新推荐文章于 2024-05-27 23:39:48 发布
原创 最新推荐文章于 2024-05-27 23:39:48 发布 · 140 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端

本文介绍了Vue.js中Vuex的状态管理模式，包括state、mutations、actions和getters的职责。通过mapState、mapGetters、mapActions和mapMutations等辅助方法，简化了组件与Vuex的交互。此外，还探讨了Vuex的子组件模式，允许将action和mutation整合到模块中，提高代码组织性。

4个功能模块

state   存放数据 
mutations   修改数据
actions  请求接口
getters  计算属性，计算state当中的数据

state   actions  mutations
acitons  context参数的commit方法调用mutations
mutation  state参数修改state数据
组件当中通过 dispatch调用action 
组件当中通过  $store调用state

map映射

mapState vuex关于state的辅助方法，可以直接将state当中的变量添加到vue组件的computed当中，然后在组件当中安装computed计算属性直接调用

mapGetters vuex关于getters的辅助方法，可以直接将getters当中的变量添加到vue组件的computed当中，然后在组件当中安装computed计算属性直接调用

mapActions vuex关于action的辅助方法，可以直接将action当中的方法添加到vue组件的methods当中，然后在组件当中安装methods方法直接调用

mapMutations vuex关于mutations的辅助方法，可以直接将mutations当中的方法添加到vue组件的methods当中，然后在组件当中安装methods方法直接调用

 

Vuex子组件

我们需要一个方法，将越来越多的action,mutation数据进行整合。vuex提供了子组件模式。

子组件定义

自定义一个对象，然后再对象当中编写vuex的属性：action，mutation，state，getters

最后将这个对象放到vuex的实例的modules下

痞子红毛
关注
Vue.js入门系列（三十二）：Vue3技术——工程结构分析、开发者工具安装与初识 `setup`
私聊前往站内信：https://i.youkuaiyun.com/#/msg/chat/weixin_44976692
09-23 1万+
Vue DevTools 是 Vue.js 官方提供的一款浏览器扩展工具，旨在帮助开发者调试 Vue 应用程序。通过 DevTools，开发者可以查看组件树、检查状态、追踪事件流以及观察 Vuex 状态和路由变化。setupVue 3 工程结构：了解了 Vue 3 项目的文件结构和各个文件的作用，特别是main.js文件如何初始化应用并挂载到 DOM。安装开发者工具：学会了如何安装 Vue DevTools 并启用其对 Vue 3 项目的支持，帮助调试 Vue 应用。初识setup函数。
vuex基础 (四) 01-actions（异步获取数据）——Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象
weixin_44867717的博客
02-24 3370
05-vuex基础-actions（异步获取数据）——Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象 网址：https://vuex.vuejs.org/zh/guide/actions.html 异步获取数据 第一步：定义： 在src/main.js中： //申明数据 state:{ //申明数据,相当于vue实例中的data...
Vuex中的actions的参数
小羊的博客
09-03 1万+
actions可以说是mutation的加强版，它可以通过commit mutations中的方法改变状态，最重要的是它可以进行异步操作，在组件中通过$store.dispatch来触发action中定义的方法。 今天是要来说一下action函数的参数 一般在使用actions方法时我们会像下面的书写方式： actions:{ add_num({commit}){ c...
vuex
LIChunJie7012的博客
03-06 278
四、Vuex ps:仅供本人记忆 4.1 认识Vuex 4.1.1 什么是Vuex？ Vuex是一个状态管理模式。 他可以将多个组件间需要共享的数据(状态)，保存在一个容器中(store)。 每个组件可以直接获取和修改这些共享的数据(状态) Vuex 的状态存储是响应式的，若 容器(store) 中的数据发生变化，则会重新渲染对应页面视图 有哪些数据需要在多个组件间共享？ 用户登录状态、用户名称、头像等等 V...
vuex中actions的作用及两个用法
优快云_go_die的博客
11-19 3648
作用：只能在actions里面进行异步任务 比如想要启用定时器函数，就必须在action里面进行，同时要记得只有mutations能修改state数据，actions不能直接修改。 用法一： 1.首先用法一和用法二都是一样的，现在actions上面进行定义： actions: { timeSub(context,mSeconds){//第一个参数是context固定不变，第二个是自定义参数 setTimeout(() => { context.commit('sub',3
vuex总结(五)——actions
weixin_47450807的博客
02-23 2855
在vuex中的actions选项中保存的是一些异步的方法。在actions中提交mutation，而不是直接改变状态。 一、actions的基本使用 如上述代码所示，此时在actions中传入的参数为context，context是一个和store具有相同的方法和属性。 二、actions的参数设置 三、actions的辅助函数 actions的辅助函数在options中的使用 actions的辅助函数在composition api中的使用 四、actions异步返回promise ...
【Vue.js基础】1、初识Vue.js：安装与基本用法
weixin_52938153的博客
05-27 740
Vue.js是一个由尤雨溪（Evan You）开发的渐进式JavaScript框架，专注于构建用户界面。凭借其简单易用的API和灵活的架构，Vue.js能够轻松集成到项目中，也可以用于开发复杂的单页应用（SPA）。Vue.js采用双向数据绑定和基于组件的开发模式，显著提升了开发效率和代码复用性。其丰富的生态系统，包括Vue CLI、Vue Router和Vuex等工具，使得Vue.js成为现代Web开发中备受欢迎的选择。无论是初学者还是经验丰富的开发者，Vue.js都提供了强大的功能和极佳的开发体验。
【Vue学习笔记_17】Vuex状态管理
weixin_44752429的博客
11-28 618
【Vue学习笔记_17】Vuex状态管理Vuex初识Vuex基本使用Vuex-StateVuex-GettersVuex-MutationsMutations传递参数Mutations提交风格Mutations响应规则Mutations类型常量Vuex-ActionsVuex-ModulesVuex-store目录结构 配套可执行代码示例 => GitHub Vuex初识 Vuex：一个专为Vuejs应用程序开发的状态管理模式，应用于多界面状态管理。它采用集中式存储管理应用的所有组件的状态，并以相应的
01vue初识_vue_principle9nn_
10-03
"01vue初识_vue_principle9nn_" 涉及的是Vue的基础应用部分，这通常包括Vue的核心概念、安装、基本结构以及一些基础的指令和API。 1. **Vue核心概念**： - **数据绑定**：Vue的核心特性之一是双向数据绑定，通过`v...
初识Mpvue：快速搭建小程序开发框架
- 支持Vuex进行全局状态管理，方便管理数据 - 提供单文件组件Vue文件开发，使代码结构更加清晰 - 可复用已有的Vue.js组件和第三方库，提高开发效率 ## 1.2 Mpvue与其他小程序框架的对比 与其他小程序框架相比，...
vuex3的介绍与state、actions和mutations的使用
qq_56715703的博客
03-10 2604
Vuex 是什么？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
vuex中的actions，mutations，getters
m0_58656423的博客
05-10 885
vuex中的actions，mutations，getters
vuex中actions中函数默认自带参数context，为什么还可以写成{commit}或者{dispatch}或者其他的
weixin_44898897的博客
04-10 6252
context的话就相当于state的父亲，上一级，包含着state中的所有属性 context:{ state, 等同于store.$state，若在模块中则为局部状态 rootState, 等同于store.$state,只存在模块中 commit, 等同于store.$commit dispatch, 等同于s...
Vuex的五个核心概念
M_Edison的博客
04-11 656
文章目录五个核心概念1. state2. Getters的使用3 Mutations3.1 基本使用3.2 响应规则3.3 常量类型3.4 同步函数4. Action4.1 使用Promise5 Moudle6 项目结构 五个核心概念 const store=new Vuex.Store({ state:{}, mutations:{}, actions:{}, getters:{}, modules:{} }) ​ 以上为五个核心概念的内容，接下来我们一一介绍: ​ 首先贴出一张图以
vue中的Actions
itdabaotu
05-30 2万+
actions异步修改状态 actions和mutations是类似的，不同之处在于： Action提交的是Mutation，不能够直接修改state中的状态，而Mutations是可以直接修改state中状态的； Action是支持异步操作的，而Mutations只能是同步操作。 还是通过代码来理解吧 1、在store.js中定义一个常量actions，如下： co...
vuex学习六----actions
前端菜鸟
07-24 9228
1：ActionsAction类似于mutation。不同在于： Action提交的是mutation，而不是直接变更状态； Action可以包含任意异步操作； const store=new Vuex.Store({ state:{ count:0 }, mutation:{ increment(state){ sta
vuex中的acitons的理解
czx3387170的博客
09-07 336
1/首先vuex中的mutions相当于method,vuex中建议我们mutions中的方法名用大写，action中定义的方法是用来提交mutions中的方法，所以aciton中的方法也要有方法名，并且方法名有一个参数，这个参数就是vuex的一个实例，通过实例可以获取这个实例的属性和方法。 vuex创建的一个实例context 包含以下属性和方法 context = { dispatch: local.dispatch, 　　　　　 commit: local.commit, 　　　　　 g.
vuex中mutation/action的传参方式
热门推荐
Wopelo的博客
05-11 3万+
前言 在vuex中提交 mutation 是更改状态的唯一方法，并且这个过程是同步的，异步逻辑都应该封装到 action 里面。对于mutation/action，有一个常见的操作就是传参，也就是官网上说的“提交载荷”。 这里是关于如何在vue-cli中使用vuex的方法，我们采用将vuex设置分割成不同模块的方法。其中，state模块中配置如下 //vuex中的state const st...
Vuex源码学习（八）模块的context如何被创建以及它的作用
weixin_33816821的博客
04-02 1726
你不知道action与mutation怎么被调用的？赶紧回去看啊Vuex源码学习（七）action和mutation如何被调用的（调用篇）） 上两个小节已经讲述了commit与dispatch如何调用mutation与action的，但是action中有几个参数感觉涉及到了一些我们遗漏（故意不讲）的点。 模块的context 在installModule的时候 给每个模块绑定了一个属性conte...
头歌Python初识-基本语法
最新发布
02-26
### Python 基础语法概述 Python 是一种解释型高级编程语言，以其简洁清晰的语法著称。对于初学者来说，理解其基本结构和语法规则是非常重要的。 #### 代码组织与缩进 Python 使用缩进来表示代码块之间的关系，而不是像其他一些编程语言那样使用大括号或其他分隔符。每一级缩进通常由四个空格组成[^2]。例如： ```python def my_function(): print("This is inside the function") # 这里有一个缩进级别 print("This line is outside of the function") ``` #### 控制流语句 Python 提供了几种常见的控制流工具来管理程序执行路径，包括条件判断 `if` 和循环 `for`, `while` 等。下面是一个简单的例子展示了如何使用这些语句： ```python number = 10 if number > 5: print(f"{number} is greater than five.") else: print(f"{number} is not greater than five.") for i in range(3): print(i) counter = 0 while counter < 3: print(counter) counter += 1 ``` #### 注释 为了提高代码可读性和维护性，在编写过程中添加适当注释是非常有益的做法。单行注释可以通过井号(`#`)实现；而多行注释则可以采用三重引号（无论是三个单引号还是双引号都可以）[^4]： ```python # This is a single-line comment. ''' This is a multi-line comment. It spans multiple lines. ''' """ Another way to write multi-line comments, using triple double quotes instead. """ ``` #### 变量定义 在 Python 中声明变量不需要指定数据类型，直接赋值即可创建新变量。支持多种内置的数据类型如整数(int), 浮点数(float)，字符串(str)等: ```python integer_example = 42 # Integer variable floating_point_example = 3.14 # Float variable string_example = "Hello, world!" # String variable ``` 通过上述内容的学习，能够帮助建立起对 Python 编程的基础认识，并为进一步深入学习打下良好基础。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值