vuex的原理和使用方法

简介

Vuex 是 Vue.js 应用的状态管理模式,它为应用内的所有组件提供集中式的状态(数据)管理。可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。

Vuex的构成 

  • state:state 是 Vuex 的数据中心,也就是说state是用来存储数据的。

  • getters:state 对象读取方法。Vue Components 通过该方法读取全局 state 对象。

  • mutations:状态改变操作方法。 是 Vuex 修改 state 的唯一推荐方法,其他修改方式在严格模式下将会报错。 该方法只能进行同步操作, 且方法名只能全局唯一。 操作之中会有一些 hook 暴露出来, 以进行state 的监控等。

  • actions:操作行为处理模块。 负责处理 Vue Components 接收到的所有交互行为包含同步/异步操作, 支持多个同名方法, 按照注册的顺序依次触发。 向后台 API 请求的操作就在这个模块中进行, 包括触发其他 action 以及提交 mutation 的操作。 该模块提供了 Promise的封装, 以支持 action 的链式触发。

  • modules:将 Store 分割成模块,每个模块拥有自己的 State、Getters、Mutations Actions。

 Vuex的使用

1、安装         Vuex:npm install vuex

2、创建store示例

store对象

import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count++;}},actions: {increment({ commit }) {commit('increment');}},getters: {count: state => state.count}
});

在 Vue 根实例中注册store

import Vue from 'vue';
import App from './App.vue';
import store from './store';new Vue({store,render: h => h(App)
}).$mount('#app');

在组件中使用 Store

export default {computed: {count() {return this.$store.state.count;}},methods: {increment() {this.$store.dispatch('increment');}}
};

 使用Vuex内容扩展

在真正开发中使用vuex时会有好多细节知识和注意事项,下面我们扩展一下,仅供参看

 Vue 组件中获得 Vuex 状态(State) 

方式一 this.$store.state获取

通过在根实例中注册 store 选项,该 store 实例会注入到根组件下的所有子组件中,且子组件能通过 this.$store 访问到

computed: {count () {return this.$store.state.count}
}

 方式二mapState 辅助函数获取(推荐)

当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性

<template><div>{{count}}</div>
</template>
<script>
import { mapState }from 'vuex
export default{computed:{...mapstate(['count'])}
}
</script>

Getter的定义和获取方式

定义getters:

需要显示所有大于5的数据,正常的方式,是需要list在组件中进行再一步的处理,但是getters可以帮助我们实现它

【下面getters引用的state中的数据:list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]】

getters: {// getters函数的第一个参数是 state// 必须要有返回值filterList:  state =>  state.list.filter(item => item > 5)
}

获取getters:

方式一: 通过属性访问

this.$store.getters.filterList

方式二:辅助函数 - mapGetters 

<template><div>{{filterList}}</div>
</template>
<script>
import { mapGetters }from 'vuex
export default{computed:{...mapGetters(['filterList'])}
}
</script>

Vue组件中调用Vuex:mutations中的方法

  • 直接通过 store 调用 $store.commit('模块名/xxx ', 额外参数)
  • 通过 mapMutations 映射

        1、默认根级别的映射 mapMutations([ ‘xxx’ ])
        2、子模块的映射 mapMutations(‘模块名’, [‘xxx’]) - 需要开启命名空间

方式一:普通调用方式

  • this.$store.commit('addCount') 此为不带参数的写法
  • this.$store.commit('addCount', 10) 此为带参数写法
<template><div @click="addData">{{count}}</div>
</template>
<script>
export default{methods: {addData() {this.$store.commit('increment')}}
}
</script>

方式二:辅助函数- mapMutations

mapMutations是将所有mutations里面的方法映射为实例methods里面的方法

<template><div @click="addData">{{count}}</div><div @click="increment">{{count}}</div>
</template>
<script>
export default{
import  { mapMutations } from 'vuex'methods: {// 有别名的写法[对应第一行div]...mapMutations({addData:'increment'})// 同名的简写[对应第二行div]...mapMutations(['increment'])}
}
</script>

Vue组件获取Vuex:actions中的方法

  • 直接通过 store 调用 $store.dispatch('模块名/xxx ', 额外参数)
  • 通过 mapActions 映射

        1、默认根级别的映射 mapActions([ ‘xxx’ ])
        2、子模块的映射 mapActions(‘模块名’, [‘xxx’]) - 需要开启命名空间

方式一:普通调用方式

this.$store.dispatch('increment')

this.$store.dispatch('increment',{num: 10})

<template><div @click="addData">{{count}}</div>
</template>
<script>
export default{methods: {addData() {this.$store.dispatch('increment')}}
}
</script>

方式二:辅助函数 -mapActions

mapActions 是把位于 actions中的方法提取了出来,映射到组件methods中

<template><div @click="increment">{{count}}</div>
</template>
<script>
export default{
import  { mapActions } from 'vuex'methods: {...mapActions (['increment'])}
}
</script>

 

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

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

相关文章

修改系统启动环境变量

修改系统启动环境变量 查看uboot默认env 首先连接好开发板的串口终端&#xff0c;在开发板上后&#xff0c;一直快速短按 空格键 即可进入 uboot的 shell 交互命令行内。在命令行内输入 print 命令&#xff0c;可以看到当前系统的所有环境变量。 > print aw-ubi-spinand…

[DL]深度学习_针对图像恢复的高效扩散模型DiffIR

DiffIR: Efficient Diffusion Model for Image Restoration Abstract 扩散模型(DM)通过将图像合成过程建模为去噪网络的顺序应用&#xff0c;实现了SOTA的性能。然而&#xff0c;与图像合成不同的是&#xff0c;图像恢复(IR)对生成符合ground-truth的结果有很强的约束。因此&am…

【Linux基础】Linux中的开发工具(1)--yum和vim

目录 ✈️前言一&#xff0c;Linux 软件包管理器 yum1. 什么是软件包2. 如何安装软件3. 如何卸载软件 二&#xff0c;Linux编辑器-vim使用1. vim的基本概念1.1 命令/正常/普通模式1.2 插入模式1.3 底行模式 三&#xff0c;vim命令模式命令集1. 移动光标2. 删除字符3. 复制4. 替…

用python制作88键赛博钢琴(能用鼠标键盘进行弹奏)

用python制作88键赛博钢琴 前言 恭喜这位博主终于想起了自己的账号密码&#xff01; 时光荏苒&#xff0c;转眼间已逾一年未曾在此留下墨香。尽管这一年间&#xff0c;博主投身于无尽的忙碌与挑战之中&#xff0c;但令人欣慰的是&#xff0c;那份初心与热情似乎并未因岁月的流…

Django后台数据获取展示

​ 续接Django REST Framework&#xff0c;使用Vite构建Vue3的前端项目 1.跨域获取后台接口并展示 安装Axios npm install axios --save 前端查看后端所有定义的接口 // 访问后端定义的可视化Api接口文档 http://ip:8000/docs/ // 定义的学生类信息 http://ip:8000/api/v1…

Ubuntu下交叉编译器工具链的安装方法

本篇文章记录Ubuntu下交叉编译器工具链的安装方法。 目录 一、交叉编译器 1、交叉编译器简介 2、获取交叉编译器 3、安装交叉编译器 4、安装相关库 二、结语 一、交叉编译器 1、交叉编译器简介 交叉编译器是一种编译器&#xff0c;它在一种平台上运行&#xff0c;但生成…

如何获取VS Code扩展的版本更新信息

获取VS Code 扩展的版本更新的需求 因为企业内部有架设私有扩展管理器的要求&#xff0c;但是对于一些官方市场的插件&#xff0c;希望可以自动获取这些扩展的更新并上传至私有扩展管理器。于是就有了本篇介绍的需求&#xff1a; 通过API的方式获取VS Code 扩展的更新。 关于…

HarmonyOS Next 系列之列表下拉刷新和触底加载更多数据实现(十一)

系列文章目录 HarmonyOS Next 系列之省市区弹窗选择器实现&#xff08;一&#xff09; HarmonyOS Next 系列之验证码输入组件实现&#xff08;二&#xff09; HarmonyOS Next 系列之底部标签栏TabBar实现&#xff08;三&#xff09; HarmonyOS Next 系列之HTTP请求封装和Token…

STM32入门开发操作记录(九)——外部时钟定时器

目录 一、项目准备1. 工程模板2. 器件接线 二、外部时钟1. 端口复用2. 流程示意 三、定时器模块Timer.cTimer.h 四、遮光计数 一、项目准备 1. 工程模板 本篇项目所用模板包含以下模块&#xff0c;声明函数见头文件&#xff0c;模块添加和函数功能详见往期记录。   2. 器件…

Python之格式化输出

格式化输出 方法一&#xff1a;用%方法二&#xff1a;用format()函数设置输出的内容的宽度和小数位数 方法一&#xff1a;用% 直接用print()函数对字符串进行输出&#xff0c;是没有进行格式化控制的。 格式化&#xff0c;是对输出内容的显示方式进行设置。 首先&#xff0c;要…

小程序滑动单元格

项目场景&#xff1a;小程序用户管理列表&#xff0c;通过单元格滑动实现“密码重置”、“删除”功能。 技术框架&#xff1a;uniapp、uview3、ts 效果如下&#xff1a; 前端页面&#xff1a; <template><view class"fui-wrap"><view class"f…

Spring Boot 的Web开发

Spring Boot 的Web开发 一、 静态资源映射规则 总结&#xff1a; 只要静态资源放在类路径下&#xff1a; called /static (or /public or /resources or /METAINF/resources 访问 &#xff1a; 当前项目根路径/ 静态资源名 二、 enjoy模板引擎 Enjoy模板引擎是一个轻量级的…

数据结构-常见的七大排序

上节中我们学习了七大排序中的五种(插入排序、希尔排序、堆排序、选择排序、交换排序) 数据结构-常见的七大排序-CSDN博客 这节我们将要学习快速排序(hoare、指针法、挖洞法(快排的延伸)、快速排序非递归(栈)) 1.快速排序 1.1 hoare法 1.1思路 1.选出一个key&#xff0c;一…

浅看MySQL数据库

有这么一句话&#xff1a;“一个不会数据库的程序员不是合格的程序员”。有点夸张&#xff0c;但是确是如此。透彻学习数据库是要学习好多知识&#xff0c;需要学的东西也是偏难的。我们今天来看数据库MySQL的一些简单基础东西&#xff0c;跟着小编一起来看一下吧。 什么是数据…

Windows 11环境下安装uwsgi的步骤和方法

正在用Django做个小网站&#xff0c;经常要用runserver启动服务观察效果&#xff0c;很不方便&#xff0c;就想装个uwsgi&#xff0c;让服务总是在后台运行&#xff0c;免得切换。上网一查发现&#xff0c;在windows下安装uwsgi不是一件简单的事情&#xff0c;很多人在尝试之后…

Python | Leetcode Python题解之第338题比特位计数

题目&#xff1a; 题解&#xff1a; class Solution:def countBits(self, n: int) -> List[int]:bits [0]for i in range(1, n 1):bits.append(bits[i & (i - 1)] 1)return bits

Spring Web MVC入门(下)

1. 响应 1.1 返回静态页面 创建前端页面&#xff0c;如下图所示&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Index页面</title> </head> <body>Hello,Spring MVC…

设计模式21-组合模式

设计模式21-组合模式&#xff08;Composite Pattern&#xff09; 写在前面 动机定义与结构定义结构主要类及其关系 C代码推导优缺点应用场景总结补充叶子节点不重载这三个方法叶子节点重载这三个方法结论 写在前面 数据结构模式 常常有一些组件在内部具有特定的数据结构。如何…

CVPR2023《DNF: Decouple and Feedback Network for Seeing in the Dark》暗光图像增强论文阅读笔记

相关链接 论文链接 https://openaccess.thecvf.com/content/CVPR2023/papers/Jin_DNF_Decouple_and_Feedback_Network_for_Seeing_in_the_Dark_CVPR_2023_paper.pdf 代码链接 https://github.com/Srameo/DNF 摘要 RAW数据的独特属性在低光照图像增强方面展现出巨大潜力。…

使用RKNN在Orange Pi 5 (RK3588s) 上部署推理PPO深度学习模型

文章目录 一、前言1️⃣、Orange Pi 是什么&#xff1f;2️⃣、PPO 是什么&#xff1f;3️⃣、RKNN 是什么&#xff1f;3️⃣、ONNX 是什么&#xff1f; 二、项目简介三、部署流程1️⃣、PPO 网络结构2️⃣、PPO 输出模型&#xff0c;模型转换&#xff0c;以及对比检查3️⃣、.…