1,前言

这些内容是博主在学习过程中记录下来的,有一些不重要的点就跳过了,需要时自行查询文档,4.0对比3.0,区别不大。

VueX4.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全家桶之VueX4教程的更多相关文章

  1. 助你上手Vue3全家桶之Vue-Router4教程

    目录 1,前言 1,Router 2.1,跳转 2.2,打开新页面 3,Route 4,守卫 4.1,onBeforeRouteLeave 4.2,onBeforeRouteUpdate 4.3,路由 ...

  2. 助你上手Vue3全家桶之Vue3教程

    目录 前言 1,setup 1.1,返回值 1.2,注意点 1.3,语法 1.4,setup的参数 2,ref 创建响应式数据 3,reactive 创建响应式数据 4,computed 计算属性 5 ...

  3. 基于 vite 创建 vue3 全家桶项目(vite + vue3 + tsx + pinia)

    vite 最近非常火,它是 vue 作者尤大神发布前端构建工具,底层基于 Rollup,无论是启动速度还是热加载速度都非常快.vite 随 vue3 正式版一起发布,刚开始的时候与 vue 绑定在一起 ...

  4. vue3 vite2 封装 SVG 图标组件 - 基于 vite 创建 vue3 全家桶项目续篇

    在<基于 vite 创建 vue3 全家桶>一文整合了 Element Plus,并将 Element Plus 中提供的图标进行全局注册,这样可以很方便的延续 Element UI 的风 ...

  5. 开箱即用 yyg-cli(脚手架工具):快速创建 vue3 组件库和vue3 全家桶项目

    1 yyg-cli 是什么 yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架.在 npm 上发布了两个月,11月1日进行了大升级,发布 1.1.0 版本:支持创建 vue3 全家桶项目和 ...

  6. ⚡ vue3 全家桶体验

    前置 从创建一个简单浏览器导航首页项目展开,该篇随笔包含以下内容的简单上手: vite vue3 vuex4 vue-router next 预览效果有助于理清这些内容,限于篇幅,不容易展开叙述.由于 ...

  7. Vue3 全家桶,从 0 到 1 实战项目,新手有福了

    前端发展百花放,一技未熟百技出.未知何处去下手,关注小编胜百书. 我是前端人,专注分享前端内容! 本篇文章主要是,使用 vite 创建一个vue3 项目,实践 vie-router4 vuex4 结合 ...

  8. Vue3全家桶升级指南一composition API

    1.setup() vue3中的composition API中最重要的就是setup方法了,相当于组件的入口,所有的composition API都必须放到setup()中的使用. setup是在组 ...

  9. Vue3全家桶升级指南二ref、toRef、toRefs的区别

    ref是对原始数据的拷贝,当修改ref数据时,模板中的视图会发生改变,但是原始数据并不会改变. toRef是对原始数据的引用,修改toRef数据时,原始数据也会发生改变,但是视图并不会更新. 在vue ...

随机推荐

  1. 分布式必备理论基础:CAP和BASE

    大家好,我是老三,今天是没有刷题的一天,心情愉悦,给大家分享两个简单的知识点:分布式理论中的CAP和BASE. CAP理论 什么是CAP CAP原则又称CAP定理,指的是在一个分布式系统中,Consi ...

  2. 洛谷P1060——开心的金明

    https://www.luogu.org/problem/show?pid=1060 题目描述 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间他自己专用的很宽敞的房间.更让他高兴的是,妈妈 ...

  3. mysql 不常用的存储引擎

    csv 数据文件可以编辑;每一列不能为空,不支持索引:文件保存数据,cat可以查看数据;用处:数据交换中间表--excel表导入数据等; Archive 对表数据进行压缩,磁盘i/o减少:节省空间;只 ...

  4. python线程threading

    线程示例: import threading import time # 唱歌任务 def sing(): # 扩展: 获取当前线程 # print("sing当前执行的线程为:" ...

  5. lua文件修改为二进制文件

    注意:lua编译跟luajit编译的二进制文件是不兼容,不能运行的 如果是使用luajit,请直接使用luajit直接编译二进制 第一种:luajit编译(以openresty为例,跟luac是相反的 ...

  6. 『GoLang』包

    可见性规则 在Go语言中,标识符必须以一个大写字母开头,这样才可以被外部包的代码所使用,这被称为导出.标识符如果以小写字母开头,则对包外是不可见的,但是他们在整个包的内部是可见并且可用的.但是包名不管 ...

  7. P6076-[JSOI2015]染色问题【组合数学,容斥】

    正题 题目链接:https://www.luogu.com.cn/problem/P6076 题目大意 给出\(n*m\)的网格,\(c\)种颜色涂色要求 每个格子可以染色也可以不染 每一行每一列至少 ...

  8. disruptor笔记之六:常见场景

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  9. Java基础- 重写,重构和重载

    重写也称为覆盖, 是指子类与父类的方法名相同但是可以有不同的权限(子类权限需大于父类),返回值(J2SE 5.0以后增加的功能,且子类的返回值必须是父类返回值的子类)或者方法实现. 重写体现了子类补充 ...

  10. 鲲鹏展翅|SphereEx 获华为鲲鹏技术认证

    SphereEx Data Middleware 通过了华为鲲鹏技术认证并加入鲲鹏展翅伙伴计划,未来 SphereEx Data Middleware 产品将继续以分布式能力为基础,以数据安全.分布式 ...