助你上手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 ...
随机推荐
- FastDFS 配置 Nginx 模块及访问测试
#备注:以下nginx-1.10.3源码目录根据nginx版本号不同会有相应的变化,以nginx版本号为准#一.安装 Nginx 和 fastdfs-nginx-module1,安装 Nginx 请看 ...
- 干货!基于SpringBoot的RabbitMQ多种模式队列实战
目录 环境准备 安装RabbitMQ 依赖 连接配置 五种队列模式实现 1 点对点的队列 2 工作队列模式Work Queue 3 路由模式Routing 4 发布/订阅模式Publish/Subsc ...
- 【AGC025B】RGB Color
[AGC025B]RGB Color 题面描述 Link to Atcoder Link to Luogu Takahashi has a tower which is divided into \( ...
- Java中int和short的转化
例子[1]: 第一种情况: short a = 1; a = a + 1; // 这一步会报错 System.out.print(a); 编译器会报错,原因如下: 第二种情况: short a = 1 ...
- CodeForce-799C Fountains (记忆化DP)
Fountains CodeForces - 799C 某土豪想要造两座喷泉.现在有 n 个造喷泉的方案,我们已知每个方案的价格以及美观度.有两种合法的货币:金币和钻石.这两种货币之间不能以任何方式转 ...
- PHP的变量赋值
这个标题估计很多人会不屑一顾,变量赋值?excuse me?我们学开发的第一课就会了好不好.但是,就是这样基础的东西,反而会让很多人蒙圈,比如,值和引用的关系.今天,我们就来具体讲讲. 首先,定义变量 ...
- Java基础系列(40)- Arrays类
Arrays类 数据的工具类java.util.Arrays 由于数组对象本身并没有什么方法可以供我们调用,但API中提供了一个工具类Arrays供我们使用,从而可以对数据对象进行一些基本的操作 查看 ...
- Jmeter系列(14)- Setup与tearDown线程组
与普通线程组区别 #Setup线程组:在普通线程组执⾏前触发 #tearDown线程组:在普通线程组执⾏后触发 线程组属性配置详情完全⼀致 使⽤策略建议 #Setup 线程组 – 压测执⾏准备阶段,准 ...
- ubuntu18.04 kuebadm 安装 k8s-1.15.9
ubuntu kubeadm 搭建kubernetes1.15.9 准备 update && 安装docker apt-get update apt install docker 修改 ...
- python3之cx_Freeze使用(PyQt5)
1. cx_Freeze简介 Python脚本在装有Python的系统中可以直接双击运行,但绝大多数普通用户并没有配置此类环境,而编译为可执行二进制文件后,用户无需预先安装Python及依赖库即可 ...