Vuex3学习笔记

文章目录

  • 1,入门案例
    • 辅助函数
  • 2,mutations传参
    • 辅助函数
  • 3,actions
    • 辅助函数
  • 4,getters
    • 辅助函数
  • 5,模块拆分
  • 6,访问子模块的state
    • 辅助函数
  • 7,访问子模块的getters
    • 辅助函数
  • 8,访问子模块的mutations
    • 辅助函数
  • 9,访问子模块的actions
    • 辅助函数

1,入门案例

安装库。

npm install vuex@3

新建store.js。

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count++}}
})export default store

main.js。

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

最后,计数器案例。

<template><h1 @click="add">{{ $store.state.count }}</h1>
</template><script>
export default {name: 'App',methods: {add() {this.$store.commit('increment')}}
}
</script>

效果:

在这里插入图片描述

辅助函数

可以将数据自动变成计算属性。

<template><h1 @click="add">{{ count }}</h1>
</template><script>
import { mapState } from "vuex";
export default {name: 'App',methods: {add() {this.$store.commit('increment')}},computed: {...mapState(['count'])}
}
</script>

2,mutations传参

跟着后面写就行,只能传一个参数。

const store = new Vuex.Store({state: {count: 0},mutations: {increment(state, v) {state.count += v}}
})this.$store.commit('increment', 5)

辅助函数

可以将mutations自动变成方法。

<template><h1 @click="increment(5)">{{ count }}</h1>
</template><script>
import { mapState, mapMutations } from "vuex";
export default {name: 'App',methods: {...mapMutations(['increment'])},computed: {...mapState(['count'])}
}
</script>

3,actions

异步操作数据。

const store = new Vuex.Store({state: {count: 0},mutations: {increment(state, v) {state.count += v}},actions: {incrementAction(context, v) {setTimeout(() => {context.commit('increment', v)}, 1000)}}
})this.$store.dispatch('incrementAction', 5)

辅助函数

可以将actions自动变成方法。

<template><h1 @click="incrementAction(5)">{{ count }}</h1>
</template><script>
import { mapState, mapMutations, mapActions } from "vuex";
export default {name: 'App',methods: {...mapActions(['incrementAction']),...mapMutations(['increment'])},computed: {...mapState(['count'])}
}
</script>

4,getters

派生状态,类似于计算属性。

const store = new Vuex.Store({state: {count: 0},mutations: {increment(state, v) {state.count += v}},actions: {incrementAction(context, v) {setTimeout(() => {context.commit('increment', v)}, 1000)}},getters: {count1(state) {return state.count + "个"}}
})$store.getters.count1 

辅助函数

可以将getters自动变成计算属性。

<template><h1 @click="incrementAction(5)">{{ count1 }}</h1>
</template><script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
export default {name: 'App',methods: {...mapActions(['incrementAction']),...mapMutations(['increment'])},computed: {...mapState(['count']),...mapGetters(['count1'])}
}
</script>

5,模块拆分

新建a.js。

新增了一个配置项namespaced。

export default {namespaced: true,state: {count: 0},mutations: {increment(state, v) {state.count += v}},actions: {incrementAction(context, v) {setTimeout(() => {context.commit('increment', v)}, 1000)}},getters: {count1(state) {return state.count + "个"}}
}

b.js。

export default {namespaced: true,state: {count: 0},mutations: {increment(state, v) {state.count += v}},actions: {incrementAction(context, v) {setTimeout(() => {context.commit('increment', v)}, 1000)}},getters: {count1(state) {return state.count + "个"}}
}

改写store.js。

const store = new Vuex.Store({modules: {a, b}
})

6,访问子模块的state

$store.state.a.count
$store.state.b.count

辅助函数

<template><div><h1>{{ count }}</h1></div>
</template><script>
import { mapState } from "vuex";
export default {computed: {...mapState('a', ['count'])}
}
</script>

7,访问子模块的getters

$store.getters['a/count1']
$store.getters['b/count1']

辅助函数

用法与前面一致。

8,访问子模块的mutations

this.$store.commit('a/increment', 1)

辅助函数

用法与前面一致。

9,访问子模块的actions

this.$store.dispatch('a/incrementAction', 1)

辅助函数

用法与前面一致。

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

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

相关文章

Python魔法之旅-魔法方法(23)

目录 一、概述 1、定义 2、作用 二、应用场景 1、构造和析构 2、操作符重载 3、字符串和表示 4、容器管理 5、可调用对象 6、上下文管理 7、属性访问和描述符 8、迭代器和生成器 9、数值类型 10、复制和序列化 11、自定义元类行为 12、自定义类行为 13、类型检…

大宋咨询(深圳窗口满意度调查)关于政务服务窗口满意度调研的内容

政务服务窗口作为公政与社会公众之间的桥梁&#xff0c;其服务质量直接关系到公政形象与公众满意度。为了深入了解政务服务窗口的运作状况及公众的实际感受&#xff0c;大宋咨询&#xff08;深圳窗口满意度调查&#xff09;受客户委托开展政务服务窗口满意度第三方调研评估。 …

【Python】数据处理:OS目录文件操作

Python的os模块是一个用于与操作系统进行交互的标准库模块。它提供了丰富的功能来处理文件和目录、执行系统命令、获取和设置环境变量等。 工作目录操作 获取当前工作目录 os.getcwd()参数&#xff1a;无返回值&#xff1a;一个字符串&#xff0c;表示当前工作目录的路径。这…

数据库表中创建字段查询出来却为NULL?

起因&#xff1a; 今天新创建了一张表,其中一个字段命名为"word_num"带下划线&#xff0c;我在前端页面怎么也查询不出来word_num的值&#xff0c;后来在后端接口处打印了一下数据库查询出来的数据&#xff0c;发现这个字段一直为NULL&#xff0c;然后我就想到是不是…

什么,一不小心打造了一个基于大模型的操作系统

如果以大模型为Kernel, 形成一个新的操作系统&#xff0c;那么&#xff1a; 1. byzer-llm 是这个大模型操作系统的编程接口&#xff0c;有点类似Linux操作系统的C ABI。 2. byzer-retrieval 也被集成进 byzer- llm 接口里&#xff0c;算是大模型操作系统的文件系统&#xff0c…

Node.js 和 Vue 的区别的基本知识科普

Node.js和Vue.js在多个方面存在显著的区别。以下是这两者的主要区别,按照清晰的分点表示和归纳: Node.js 服务器端环境: Node.js是一个基于Chrome V8引擎的JavaScript运行环境,它使JavaScript能够在服务器端运行。为JavaScript提供服务器端的环境服务,方便地搭建响应速度…

pytorch 自定义学习率更新 Poly

Poly 学习率调整策略需要继承_LRScheduler类&#xff0c;该类包含三个重要属性和两个重要方法 学习率与batch-size的关系 一般来说&#xff0c;batch-size的大小一般与学习率的大小成正比。batch-size越大一般意味着算法收敛方向的置信度越大&#xff0c;也可以选择较大的学…

STM32快速入门(ADC数模转换)

STM32快速入门&#xff08;ADC数模转换&#xff09; 前言 ADC数模转换存在的意义就是将一些温度传感器、各自数据传感器产生的模拟信号转换成方便识别和计算的数字信号。 导航 图24 通用定时器框图&#xff1a; 图片截取自STM32 F1XX中文参考手册。还是以框图为中心&#x…

scss是什么安装使⽤的步骤

当谈到SCSS时&#xff0c;我们首先需要了解它是什么。SCSS&#xff0c;也称为Sassy CSS&#xff0c;是Sass&#xff08;Syntactically Awesome Stylesheets&#xff09;的一种语法&#xff0c;它是CSS的预处理器&#xff0c;允许你使用变量、嵌套规则、混合&#xff08;mixin&a…

FinalShell导出服务器配置信息密码password是加密的,如何解密?

本章教程,主要实现了一个小的功能,对FinalShell导出的配置信息,进行解密。 FinalShell导出之后,会产生一个json文件,例如下面这种json格式,里面记录了服务器的IP地址,端口和密码,里面的密码是经过加密处理的,本文主要利用java代码实现对这个password进行解密还原。 {&…

vue问题记录

vue3 路由跳转携带参数 路由跳转携带参数 query方法 //跳转传参 this.$router.push({path:/home,query: {id:1}}) //接受参数 this.$route.query.id问题&#xff1a;刷新页面&#xff0c;参数会丢失—未解决 将参数存在本地存储中&#xff0c;但是组件销毁时&#xff0c;清…

搜索算法例子

搜索算法例子 搜索算法是计算机科学中的重要部分,用于在数据集合中查找特定元素。这些搜索算法在不同场景中有不同的应用和性能表现,通过选择合适的搜索算法,可以提高程序的性能和效率。线性搜索:适用于小型、无序数据集。二分搜索:适用于大型、有序数据集。深度优先搜索(…

nodejs 获取服务器文件夹里面图片,并前端进行幻灯展示

最近在实现一个特别个性的要求&#xff0c;就是读取服务器的文件夹里面的图片&#xff0c;然后前端进行轮播显示&#xff0c;因为客户要求的开发环境特殊一些&#xff0c;纯js的话又实现不了对本地文件夹的读取&#xff0c;所以这里用到了node.js下面我们来看怎么实现的 为了在…

(论文翻译)Coordinate Attention for Efficient Mobile Network Design(坐标注意力 CVPR2021)

Coordinate Attention for Efficient Mobile Network Design&#xff08;CVPR2021&#xff09; 文章目录 Coordinate Attention for Efficient Mobile Network Design&#xff08;CVPR2021&#xff09;摘要1.引言2.相关工作3.方法&#xff1a;Coordinate Attention3.1.Revisit …

【c++】哈希>unordered容器哈希表哈希桶哈希的应用详解

主页&#xff1a;醋溜马桶圈-CSDN博客 专栏&#xff1a;c_醋溜马桶圈的博客-CSDN博客 gitee&#xff1a;mnxcc (mnxcc) - Gitee.com 目录 1. unordered系列关联式容器 1.1 unordered_map 1.1.1 unordered_map的文档介绍 1.1.2 unordered_map的接口说明 1.1.2.1 unordered_m…

【制作面包game】

编写一个制作面包的游戏代码涉及到游戏设计、编程和用户界面设计等多个方面。这里我可以提供一个简化版本的Python代码示例&#xff0c;用于创建一个基本的面包制作游戏。这个游戏将会有一个简单的用户界面&#xff0c;玩家可以通过输入命令来制作面包。 游戏的基本流程如下&a…

Java学习 - Maven - 常用命令(学习精选)

前言 在上一篇文章中&#xff0c;我们对 Maven 有了初步的了解&#xff0c;包括它的定义、安装步骤以及一些基本的配置方法。Maven 是一个强大的项目管理工具&#xff0c;它可以帮助开发者自动化构建过程&#xff0c;并且管理项目的依赖关系。 今天&#xff0c;我们将深入探讨…

上位机图像处理和嵌入式模块部署(f407 mcu和其他mcu品类的选择)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 很多朋友读书的时候学的是stm32&#xff0c;工作中用的也是stm32。这本来问题不大&#xff0c;但是过去两三年的经历告诉我们&#xff0c;mcu的使用…

AngularJS 表单

AngularJS 表单 AngularJS 是一个由 Google 维护的开源前端框架,它允许开发者使用 HTML 作为模板语言,并扩展 HTML 的语法,以清晰简洁地表达应用的组件。AngularJS 的核心特性之一是双向数据绑定,这极大地简化了 DOM 操作和事件处理。在 AngularJS 中,表单处理是一个重要…