vuex4 极速入门到上手

vuex4 是 vue3的兼容版本，提供了和vuex3 的相同API。因此我们可以在 vue3 中复用之前已存在的 vuex 代码。

一、安装以及初始化

vuex4安装：

npm install vuex@next

为了向vue3初始化方式看齐，vuex4 初始化方式做了相应的变化，使用新的 createStore 函数创建新的 store 实例。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createStore } from "vuex"const store = createStore({state(){return{num:1,}}
})const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')//在组件内使用时与之前一样
<div>{{$store.state.num}}</div>

二、vuex4在组件内的使用

2.1、使用场景1

在组件的模板中直接使用，与之前的api保持一致

// 在 main.js 内
const store = createStore({state(){return{num:1,}},mutations:{addNum(state){state.num++}},actions:{},modules:{}
})//组件内
<div>{{$store.state.num}}<button @click="$store.commit('addNum')">num自加</button>
</div>

2.2、使用场景2

通过 useStore 把store 引入组件内，然后操作 store 。

<template><div>store组件{{state.num}}<button @click="add">num自加</button> </div>
</template><script>
import { useStore } from "vuex"
export default {setup(){const store = useStore()return{state:store.state,add(){store.commit('addNum')}}}
}
</script>

2.3、使用场景3

store 内使用到多个值时，可以通过 toRefs 方法，将 store.state 内的数据直接展开。

<template><div>{{num}}<button @click="add">num自加</button></div>
</template><script>
import { useStore } from 'vuex'
import { toRefs } from "vue"
export default {setup(){const store = useStore()return{...toRefs(store.state),add(){store.commit('addNum')}}}
}
</script>

三、 getters 的用法

与之前的用法保持一致：

const store = createStore({state(){return{num:1,}},getters:{doubleNum(state){return state.num*2}},
})//使用1：直接在template中使用
<template>{{$store.getters.doubleNum}}
</template>//使用2：利用计算属性获取
<template><div>{{getDouble}}</div>
</template>
<script>
import { useStore } from "vuex"
import { computed } from 'vue'
export default {setup(){const store = useStore()return{state:store.state,getDouble:computed(()=>store.getters.doubleNum)}}
}
</script>

四、mutations 和 actions 的用法

调用 mutations 内的方法时，使用 commit 调用。上述的使用场景2 就是 mutations 方法的调用。

而 actions 异步更新 state 中的数据，还是需要经过 mutations 。

<template><div>{{state.num}}<button @click="asyncUpdateNum">更新num</button></div>
</template><script>
import { useStore } from "vuex"
export default {setup(){const store = useStore()return{state:store.state,asyncUpdateNum(){store.dispatch('updateNum',88)}}}
}
</script>

组件内可以通过 this.$store 属性访问store容器，使用 composition API 可以通过 useStore代替。其他的用法基本相同。

vuex4 极速入门到上手相关推荐

60 分钟极速入门 PyTorch
2017 年初,Facebook 在机器学习和科学计算工具 Torch 的基础上,针对 Python 语言发布了一个全新的机器学习工具包 PyTorch. 因其在灵活性.易用性.速度方面的优秀表现,经 ...
Java极速入门系列:第一章Java概述、Java环境、IDEA开发工具
Java极速入门-第一章Java概述.Java环境.IDEA开发工具一.什么是Java 1.好的编程语言的特性 2.Java的特点 3.Java的运行机制 4.Java的三大体系 5.Java环境 ...
0基础极速入门！深度学习高层API最强官方课程
近年来,随着深度学习技术的飞速发展,基于深度学习方法的前沿研究与应用实践在学术界与工业界大放异彩. 但是,对零基础的技术小白而言,深度学习并不是一个友好的领域.晦涩的理论.冗长的代码.复杂的调试.鱼龙 ...
直播提醒 | 零基础深度学习极速入门课程重磅开营
点击左上方蓝字关注我们今日,立春,一候东风解冻,二候蛰虫始振,三候鱼陟负冰.「深度学习7日打卡营_极速入门课程」将于今晚正式开营! 深度学习作为人工智能的热门方向,吸引了无数同学争相学习.但是深度学 ...
Zephyr OS 开发极速入门
Zephyr OS 开发极速入门 Zephyr OS简介 zephyr 开发环境搭建更新软件源安装依赖包克隆zephyr代码仓库安装必要的python3依赖工具安装CMake 安装 zeph ...
自己的电脑上怎么用python3.7_python 3.7极速入门教程9最佳python中文工具书籍下载...
筛选了2年内优秀的python书籍,个别经典的书籍扩展到5年内. python现在的主流版本是3.7(有明显性能提升,强烈推荐) 3.6, 不基于这两个或者更新版本的书,慎重选择.很多库已经不提供py ...
python基础教程 pdf github_Python极速入门的多本最佳书籍，不可错过的Python学习资料...
Python作为现在很热门的一门编程语言,介于Python的友好,许多的初学者都将其作为首选,为了帮助大家更好的学习Python,我筛选了2年内优秀的python书籍,个别经典的书籍扩展到5年内. p ...
慕课网_《RabbitMQ消息中间件极速入门与实战》学习总结
慕课网<RabbitMQ消息中间件极速入门与实战>学习总结时间:2018年09月05日星期三说明:本文部分内容均来自慕课网.@慕课网:https://www.imooc.com 教学源 ...
九十分钟极速入门Linux——Linux Guide for Developments 学习笔记
转载自: 九十分钟极速入门Linux--Linux Guide for Developments 学习笔记 http://mp.weixin.qq.com/s?__biz=MzAwNTMxMzg1MA ...