vuex在vue3的用法
vuex在vue3的用法是什么
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
其实vue3中使用vuex和vue2使用vuex大体相同,都是通过state存放数据,通过mutations去改变vuex中的数据,对于异步的情况,通过actions提交mutations中的方法进而改变vuex中的数据,带着这个思路咱们一起使用下vue3中的vuex
在开始写代码之前,先来看下我的目录结构:在store文件下,将vuex分为了如下几个ts文件
在index.ts中,将这几个模块暴露出来的方法赋值给对应的模块
1、如何使用vuex中存放的数据
state和vue2一样,都是存放数据的地方,写法上也一模一样,这里我定义了一个count属性,初始化为0
const state = {
count: 0,
}
export { state }
这时我们在vue3中的使用方法如下:首先从vuex中引入useStore函数,他的返回值就是一个vuex实例
<template>
<h1>vuex中的数据{{ store.state.count }}</h1>
</template>
<script lang="ts">
import { defineComponent } from "vue"
import { useStore } from "vuex"
export default defineComponent({
name: "index",
setup() {
const store = useStore()
return { store }
},
})
</script>
在控制台中,打印这个store可以看到store上的一些属性,很明显他就是一个vuex的实例,它具有getter,dispatch,state等属性
2. 如何改变vuex中的属性
vue3和vue2一样,都是通过提交mutations中的方法,进行对vuex中数据的改变,那具体该如何使用呢?首先看一下mutations中的写法
const mutations = {
addCount(state, payload) {
state.count = payload
},
}
export { mutations }
这里,定义了一个addCount方法,这个方法接受两个参数,第一个参数是要改变的state对象(当然你调用这个放法的传参中也可以写state.count,然后再mutations中直接state = payload就可以了),第二个参数是要改变的数据,比如进行 1 操作
<template>
<h1>vuex中的数据{{ store.state.count }}</h1>
<button @click="changeStoreCount">改变vuex数据</button>
</template>
<script lang="ts">
import { defineComponent } from "vue"
import { useStore } from "vuex"
export default defineComponent({
name: "index",
setup() {
const store = useStore()
console.log(store)
const changeStoreCount = () => {
// 在这里提交了mutations中的addCount方法
store.commit("addCount", 1)
}
return { store, changeStoreCount }
},
})
</script>
<style scoped></style>
3、 如何异步改变vuex的数据
在vue2中actions通过dispach -> mutations中的方法来实现的,在vue3中也是如此,但是需要注意的是,vue3中actions的第一个参数是固定的,是当前vuex的实例,是不需要你进行传递的,第二个参数是将要进行操作的数据,在此,笔者使用 2操作
const actions = {
asyncAddStoreCount(store, payload) { // 第一个参数是vuex固定的参数,不需要手动去传递
store.commit("addCount", payload)
},
}
export { actions }
<template>
<h1>vuex中的数据{{ store.state.count }}</h1>
<button @click="changeStoreCount">改变vuex数据</button>
<button @click="asyncChangeStoreCount">异步改变vuex数据</button>
</template>
<script lang="ts">
import { defineComponent } from "vue"
import { useStore } from "vuex"
export default defineComponent({
name: "index",
setup() {
const store = useStore()
console.log(store)
const changeStoreCount = () => {
store.commit("addCount", 1)
}
const asyncChangeStoreCount = () => {
setTimeout(() => {
// asyncAddStoreCount是mutations中的方法,2是传递过去的数据
// 异步改变vuex用dispatch方法,这里用setTimeout模拟异步操作
store.dispatch("asyncAddStoreCount", 2)
}, 1000)
}
return { store, changeStoreCount, asyncChangeStoreCount }
},
})
</script>
<style scoped></style>
效果图:
1、初始:
2、点击 【改变vuex数据】按钮:
3、 点击【异步改变vuex数据】(在一秒之后发生变化)
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tangbghib
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01