助你上手Vue3全家桶之VueX4教程
1,前言
这些内容是博主在学习过程中记录下来的,有一些不重要的点就跳过了,需要时自行查询文档,4.0
对比3.0
,区别不大。
2,State
语法有所调整
2.1,直接使用
import { onMounted } from 'vue'
import { useStore } from 'vuex'
export default {
name: 'Home',
setup() {
const Store = useStore()
onMounted(() => {
console.log(Store.state.author)
})
}
}
2.2,结合computed
import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
name: 'Home',
setup() {
const Store = useStore()
return {
count: computed(() => Store.state.author)
}
}
}
3,Getter
语法有所调整
3.1,直接使用
import { onMounted } from 'vue'
import { useStore } from 'vuex'
export default {
name: 'Home',
setup() {
const Store = useStore()
onMounted(() => {
console.log(Store.getters.getCookie)
console.log(Store.getters.getToken('Param'))
})
}
}
3.2,结合computed
import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
name: 'Home',
setup() {
const Store = useStore()
return {
count1: computed(() => Store.getters.getCookie),
count2: computed(() => Store.getters.getToken('param'))
}
}
}
4,Mutation
语法有所调整
4.1,直接使用
<p @click="set">{{ cookie }}</p>
import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
name: 'Home',
setup() {
const Store = useStore()
const set = function() {
Store.commit('setCookie', 'param')
}
return {
set,
cookie: computed(() => Store.state.cookie)
}
}
}
4.2,结合computed
<p @click="set">{{ cookie }}</p>
import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
name: 'Home',
setup() {
const Store = useStore()
return {
cookie: computed(() => Store.state.cookie),
set: () => Store.commit('setCookie', 'param')
}
}
}
5,Action
语法有所调整
5.1,直接使用
<p @click="set">{{ cookie }}</p>
import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
name: 'Home',
setup() {
const Store = useStore()
const set = function() {
Store.dispatch('set', 'param')
}
return {
cookie: computed(() => Store.state.cookie),
set
}
}
}
5.2,结合computed
<p @click="set">{{ cookie }}</p>
import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
name: 'Home',
setup() {
const Store = useStore()
return {
cookie: computed(() => Store.state.cookie),
set: () => Store.dispatch('set', 'param')
}
}
}
后记:Modules
就不做赘述了,具体用法可以参考【超详细!Vuex手把手教程】
如果看了觉得有帮助的,我是@鹏多多,欢迎 点赞 关注 评论;END
PS:在本页按F12,在console中输入document.querySelectorAll('.diggit')[0].click(),有惊喜哦
公众号
往期文章
- 助你上手Vue3全家桶之Vue-Router4教程
- 助你上手Vue3全家桶之Vue3教程
- 使用nvm管理node.js版本以及更换npm淘宝镜像源
- 超详细!Vue-Router手把手教程
- vue中利用.env文件存储全局环境变量,以及配置vue启动和打包命令
- 微信小程序实现搜索关键词高亮
- 超详细!Vue的九种通信方式
- 超详细!Vuex手把手教程
个人主页
助你上手Vue3全家桶之VueX4教程的更多相关文章
- 助你上手Vue3全家桶之Vue-Router4教程
目录 1,前言 1,Router 2.1,跳转 2.2,打开新页面 3,Route 4,守卫 4.1,onBeforeRouteLeave 4.2,onBeforeRouteUpdate 4.3,路由 ...
- 助你上手Vue3全家桶之Vue3教程
目录 前言 1,setup 1.1,返回值 1.2,注意点 1.3,语法 1.4,setup的参数 2,ref 创建响应式数据 3,reactive 创建响应式数据 4,computed 计算属性 5 ...
- 基于 vite 创建 vue3 全家桶项目(vite + vue3 + tsx + pinia)
vite 最近非常火,它是 vue 作者尤大神发布前端构建工具,底层基于 Rollup,无论是启动速度还是热加载速度都非常快.vite 随 vue3 正式版一起发布,刚开始的时候与 vue 绑定在一起 ...
- vue3 vite2 封装 SVG 图标组件 - 基于 vite 创建 vue3 全家桶项目续篇
在<基于 vite 创建 vue3 全家桶>一文整合了 Element Plus,并将 Element Plus 中提供的图标进行全局注册,这样可以很方便的延续 Element UI 的风 ...
- 开箱即用 yyg-cli(脚手架工具):快速创建 vue3 组件库和vue3 全家桶项目
1 yyg-cli 是什么 yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架.在 npm 上发布了两个月,11月1日进行了大升级,发布 1.1.0 版本:支持创建 vue3 全家桶项目和 ...
- ⚡ vue3 全家桶体验
前置 从创建一个简单浏览器导航首页项目展开,该篇随笔包含以下内容的简单上手: vite vue3 vuex4 vue-router next 预览效果有助于理清这些内容,限于篇幅,不容易展开叙述.由于 ...
- Vue3 全家桶,从 0 到 1 实战项目,新手有福了
前端发展百花放,一技未熟百技出.未知何处去下手,关注小编胜百书. 我是前端人,专注分享前端内容! 本篇文章主要是,使用 vite 创建一个vue3 项目,实践 vie-router4 vuex4 结合 ...
- Vue3全家桶升级指南一composition API
1.setup() vue3中的composition API中最重要的就是setup方法了,相当于组件的入口,所有的composition API都必须放到setup()中的使用. setup是在组 ...
- Vue3全家桶升级指南二ref、toRef、toRefs的区别
ref是对原始数据的拷贝,当修改ref数据时,模板中的视图会发生改变,但是原始数据并不会改变. toRef是对原始数据的引用,修改toRef数据时,原始数据也会发生改变,但是视图并不会更新. 在vue ...
随机推荐
- 分布式必备理论基础:CAP和BASE
大家好,我是老三,今天是没有刷题的一天,心情愉悦,给大家分享两个简单的知识点:分布式理论中的CAP和BASE. CAP理论 什么是CAP CAP原则又称CAP定理,指的是在一个分布式系统中,Consi ...
- 洛谷P1060——开心的金明
https://www.luogu.org/problem/show?pid=1060 题目描述 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间他自己专用的很宽敞的房间.更让他高兴的是,妈妈 ...
- mysql 不常用的存储引擎
csv 数据文件可以编辑;每一列不能为空,不支持索引:文件保存数据,cat可以查看数据;用处:数据交换中间表--excel表导入数据等; Archive 对表数据进行压缩,磁盘i/o减少:节省空间;只 ...
- python线程threading
线程示例: import threading import time # 唱歌任务 def sing(): # 扩展: 获取当前线程 # print("sing当前执行的线程为:" ...
- lua文件修改为二进制文件
注意:lua编译跟luajit编译的二进制文件是不兼容,不能运行的 如果是使用luajit,请直接使用luajit直接编译二进制 第一种:luajit编译(以openresty为例,跟luac是相反的 ...
- 『GoLang』包
可见性规则 在Go语言中,标识符必须以一个大写字母开头,这样才可以被外部包的代码所使用,这被称为导出.标识符如果以小写字母开头,则对包外是不可见的,但是他们在整个包的内部是可见并且可用的.但是包名不管 ...
- P6076-[JSOI2015]染色问题【组合数学,容斥】
正题 题目链接:https://www.luogu.com.cn/problem/P6076 题目大意 给出\(n*m\)的网格,\(c\)种颜色涂色要求 每个格子可以染色也可以不染 每一行每一列至少 ...
- disruptor笔记之六:常见场景
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- Java基础- 重写,重构和重载
重写也称为覆盖, 是指子类与父类的方法名相同但是可以有不同的权限(子类权限需大于父类),返回值(J2SE 5.0以后增加的功能,且子类的返回值必须是父类返回值的子类)或者方法实现. 重写体现了子类补充 ...
- 鲲鹏展翅|SphereEx 获华为鲲鹏技术认证
SphereEx Data Middleware 通过了华为鲲鹏技术认证并加入鲲鹏展翅伙伴计划,未来 SphereEx Data Middleware 产品将继续以分布式能力为基础,以数据安全.分布式 ...