vuex的使用笔记

1.安装

npm安装

npm install vuex@next --save

yarn安装

yarn add vuex@next --save

2.基本结构

import Vuex from 'vuex'const store = createStore({
//状态:相当于vue中的data()
state() {return {name: 0,code:"",todos: [{ id: 1, text: '...', done: true },{ id: 2, text: '...', done: false }]}},getters: {doneTodos (state) {return state.todos.filter(todo => todo.done)}},//更改 Vuex 的 store 中的状态的唯一方法是提交 mutation//mutation 必须同步执行mutations: {saveName(state,name){state.name= name;},saveCode(state,code){state.code= code;},},//Action 类似于 mutation//Action 提交的是 mutation,而不是直接变更状态//Action 可以包含任意异步操作actions: {//Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象//Action 通过 store.dispatch 方法触发increment (context) {context.commit('increment')}},
})export default store 

3.多模块的结构

import Vuex from 'vuex'
const module1 = {
//开启命名空间namespaced: true,state: () => ({ ... }),mutations: { ... },actions: { ... },getters: { ... }
}
const module2 = {
//开启命名空间namespaced: true,state: () => ({ ... }),mutations: { ... },actions: { ... },getters: { ... }
}
const module3 = {
//开启命名空间namespaced: true,state: () => ({ ... }),mutations: { ... },actions: { ... },getters: { ... }
}
const store = createStore({
modules: {module1: module1,module2: module2,module3: module3,}
})
export default store 

main.js 注册store


// 引入仓库
import store from 'path';new Vue({el: '#app',store,render: h => h(App)
});

4.使用方法

1.获取状态

//方法1
this.$store.state.状态名
//方法2 多模块的状态名
this.$store.state.模块名.状态名
//方法3 单模块映射的方式,在vue中的计算属性中混入
computed:{
...mapState({'状态名1','状态名2',...
})
}
//使用‘this.状态名即可获取’
//多模块映射的方式
computed:{
...mapState({module1: state => state.some.nested.module.module1,module2: state => state.some.nested.module.module2})
}

2.调用getter

//直接使用
this.$store.getters.doneTodosCount
//映射的方式
computed: {// 使用对象展开运算符将 getter 混入 computed 对象中...mapGetters(['doneTodosCount','anotherGetter',// ...])}

3. 调用mutations

//方法1 使用this.$store
//1.b不带参数
this.$store.commit('mutations的方法名')
//2.带参数
this.$store.commit('mutations的方法名',parmas)
//3.多模块的调用方式
this.$store.commit('模块名/调用模块的mutations的方法名',parmas)
//4.映射的方式 在methods中使用
methods: {...mapMutations(['increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`// `mapMutations` 也支持载荷:'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`]),}

4.调用Action

//通过this.$store.dispatch 方法触发
//映射的方式 在methods中使用import { mapActions } from 'vuex'methods: {...mapActions(['increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`// `mapActions` 也支持载荷:'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`]),...mapActions({add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`})}

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

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

相关文章

安卓横竖屏切换后,应用只展示半屏问题 AndroidAutoSize

项目使用的是这个屏幕适配框架:GitHub - JessYanCoding/AndroidAutoSize: 🔥 A low-cost Android screen adaptation solution (今日头条屏幕适配方案终极版,一个极低成本的 Android 屏幕适配方案). 最近需要做一个特殊设备的横竖屏切换适配&…

稳定视频扩散数据管理解密【stable video diffusion】

Stability AI 最近于 2023 年 11 月 21 日推出了其最新模型—稳定视频扩散(SVD)。视频生成模型的这一突破取决于数据管理的关键作用。 除了模型检查点之外,他们还发布了一份技术报告。 让我们在 Stability AI 的技术报告和一些引人注目的示例…

js的数组去重方法

目录 es6数组中对象去重 1. filter()用法 2. findIndex()用法 3. 去重 其他方法: 方法二:reduce()去重 1. reduce()用法 1.1 找出字符长度最长的数组成员。 1.2 扁平化二维数组 1.3 扁平化多维数组 三、总结方案: 使用Set&#xf…

我是如何找到人生第一个SRC漏洞的

免责声明:由于传播或利用此文所提供的信息、技术或方法而造成的任何直接或间接的后果及损失,均由使用者本人负责, 文章作者不为此承担任何责任。 这是一篇新手文章。 因为参加了补天的公益SRC活动,需要提交第一个漏洞&#xff…

armv9的RME简介

快速链接: . 👉👉👉 个人博客笔记导读目录(全部) 👈👈👈 付费专栏-付费课程 【购买须知】:【精选】ARMv8/ARMv9架构入门到精通-[目录] 👈👈👈 — 适合小白入门【目录】ARMv8/ARMv9架构高级进阶-[目录]👈👈👈 — 高级进阶、小白勿买【加群】ARM/TEE…

基于SSM的咖啡销售系统

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于SSM的咖啡销售系统,java项目。 ecli…

k8s-deployment控制器 5

K8s控制器是Kubernetes(简称k8s)系统中一个重要的组成部分,它是一个管理Pod的中间层,可以创建和管理多个Pod副本,确保它们按照预定的数量和行为进行运行。 通过编写yaml文件将信息全部存到etcd中,控制器通…

初学Flink 学后总结

最近开始学习Flink,一边学习一边记录,以下是基于【尚硅谷】Flink1.13实战教程总结的笔记,方便后面温习 目录 初始 Flink 一:基础概念 1.Flink是什么 2.Flink主要应用场景

《微信小程序开发从入门到实战》学习三十三

第四章 云开发 本章云开发技术的功能与使用,包括以下几点: 1.学习使用云开发控制台 2.学习云开发JSON数据库功能 3.学习云开文件存储功能 4.学习云函数功能 5.使用云开发技术实现投票小程序的服务端功能 投票小程序大部分已经实现。需要实现&#…

系统设计一些个人小结

一些要记得的数字 关于时间 1天 > 86400秒 关于存储 跟存储有关的K是1024,其它都是1000。下面的数字忽略1000和1024的区别。 1T > 10^12 1G > 10^9 1M > 10^6 1K > 10^3 1B > 10^9 关于网页 1个网页大小按10K估算。下载一个网页按2s估算。 关于…

高端制造业中的通用性超精密3D光学测量仪器

超精密光学3D测量仪器具有高精度、自动化程度高、实时反馈和范围广等优势。它能够实现微米级别的精确测量,能够精确测量产品的尺寸、形状和表面粗糙度等,具有广泛的应用价值和重要意义。 超精密光学3D测量仪器配备多种传感器、控制器和计算机系统&#…

fastadmin框架自带的数据效验

目录 一、fastadmin框架介绍: 注意: 二、fastadmin框架自带效验 三、引用方式: 1.引用: 2.使用案例: 一、fastadmin框架介绍: FastAdmin是基于ThinkPHP和Bootstrap开发的一款开源后台管理系统框架。…

深入理解OS--数值编码

信息的表示和处理 寻址和字节顺序 位于0x100处,int类型值0x01234567在大端和小端下的存储。 字符串的存储不受字节序影响。 移位 1.对左移,右边统一补0 2.对右移,分为算术右移,逻辑右移 算术右移下,左边补原最高有效…

OpenCvSharp从入门到实践-(03)像素

目录 像素 1、确定像素位置 2、获取像素的BGR值 3、修改像素的BGR值 像素 图像数字化是指用数字表示图像,每一幅数字图像都是有M行N列的像素组成的,其中每一个像素都存储一个像素值。计算机通常会把像素值处理为256个灰度级别,这256个灰…

k8s中安装consul集群

一、准备知识 headless services一般结合StatefulSet来部署有状态的应用,比如kafka集群,mysql集群,zk集群等,也包括本文要部署的consul集群。 0、consul集群 consul集群的分布式协议算法采用的是raft协议,这意味着必…

折线图-line

业务组件调用代码 <template><lineCom :title"lineComProps.title" :legendDataList"lineComProps.legendDataList":FeatureList"lineComProps.FeatureList" :xAxisData"lineComProps.xAxisData":seriesMultipleFlag"l…

【后端】数据字典自动生成枚举

前言 随着我老板给我灌溉的思想,逐渐开始利用代码来完成一些重复性且没有创造性的工作(我变懒啦),当我发现数据字典可以生成枚举从而大大减少开发时间的时候,我意识到事情的重要性。 数据字典 我一开始在网上找各种代码生成器的框架,然后突然意识到,这个不就是简单的…

2022年MathorCup大数据竞赛B题北京移动用户体验影响因素研究求解全过程文档及程序

2022年MathorCup高校数学建模挑战赛—大数据竞赛 B题 北京移动用户体验影响因素研究 原题再现&#xff1a; 移动通信技术飞速发展&#xff0c;给人们带来了极大便利&#xff0c;人们也越来越离不开移动通信技术带来的各种便捷。随着网络不断的建设&#xff0c;网络覆盖越来越…

XIAO ESP32S3之套件简绍

很高兴收到柴火创客空间寄来的XIAO ESP32S3开发套件。 一、套件介绍 1、电路板部分 一块XIAO ESP32S3主板、一块摄像头接口板&#xff08;可接SD卡&#xff09;&#xff0c;一根2.4G天线。 2、配件部分 一根USB-A转TypeC数据线、一个USB3.0转TypeC转接头、一个SD卡读卡器&am…

vue中keep-alive的使用

什么是keep-alive&#xff1f; keep-alive是一个内置组件&#xff0c;用于缓存和管理组件的状态。 当 keep-alive包裹一个组件时&#xff0c;这个组件的状态将会被缓存起来&#xff0c;而不是每次重新渲染。这在多个视图之间切换时特别有用&#xff0c;可以避免重复的创建和销…