vuex4|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')//在组件内使用时与之前一样 {{$store.state.num}}
二、vuex4在组件内的使用 2.1、使用场景1
在组件的模板中直接使用，与之前的api保持一致
// 在 main.js 内 const store = createStore({ state(){ return{ num:1, } }, mutations:{ addNum(state){ state.num++ } }, actions:{}, modules:{} })//组件内 {{$store.state.num}}
2.2、使用场景2
通过 useStore 把store 引入组件内，然后操作 store 。
store组件 {{state.num}}
2.3、使用场景3
store 内使用到多个值时，可以通过 toRefs 方法，将 store.state 内的数据直接展开。
{{num}}
三、 getters 的用法 与之前的用法保持一致：
const store = createStore({ state(){ return{ num:1, } }, getters:{ doubleNum(state){ return state.num*2 } }, })//使用1：直接在template中使用 {{$store.getters.doubleNum}}
//使用2：利用计算属性获取 {{getDouble}}
四、mutations 和 actions 的用法 调用 mutations 内的方法时，使用 commit 调用。上述的使用场景2 就是 mutations 方法的调用。
而 actions 异步更新 state 中的数据，还是需要经过 mutations 。
{{state.num}}
【vuex4|vuex4 极速入门到上手】组件内可以通过 this.$store 属性访问store容器，使用 composition API 可以通过 useStore代替。其他的用法基本相同。
推荐阅读
- 百度云极速下载，来体验飞的感觉，还可以看最新动漫的百度云视频哦
- typeScript入门基础介绍
- Android|Android sqlite3数据库入门系列
- Android下的IO库-Okio源码解析(一)|Android下的IO库-Okio源码解析(一) 入门
- 深度学习-入门
- 第三章|第三章 进校园重拾旧梦 登讲台初为人师第一节 接乱班面临考验 ，遇高师指点入门
- iOS开发技术之美—iOS入门技术的基础学习
- OpenCV|OpenCV-Python实战（18）——深度学习简介与入门示例
- 【入门】Python网络爬虫与信息提取1
- 垂直农场101-室内农业入门知识