脚本宝典收集整理的这篇文章主要介绍了浅析Vue3中vuex的基本使用、模块化及如何使用mapState/mapGetters和mapActions,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
1、vuex 的基本结构及基本使用:src/store/index.js
中,代码如下
// vue3中创建store实例对象的方法createStore()按需引入
import { createStore } from 'vuex'
export default createStore({
state: {
info: 'hello'
},
getters: {
// 定义一个getters
formatInfo (state) {
return state.info + ' Tom'
}
},
mutations: {
// 定义mutations,用于修改状态(同步)
updateInfo (state, payload) {
state.info = payload
}
},
actions: {
// 定义actions,用于修改状态(异步)
// 2秒后更新状态
updateInfo (context, payload) {
setTimeout(() => {
context.commit('updateInfo', payload)
}, 2000)
}
},
modules: {
}
})
2、组件模板中和 script 中 - 对store中数据的操作与使用
<template>
<div>测试组件</div>
<hr>
// 页面中直接使用渲染时,与vue2中的使用方法相同
<div>获取Store中的state、getters: {{$store.getters.formatInfo}}</div>
</template>
<script>
// 按需引入useStore()方法
import { useStore } from 'vuex'
export default {
setup () {
// Vue3中store类似于Vue2中this.$store - this.$store.state.info
// useStore()方法创建store对象,相当于src/store/index.js中的store实例对象
const store = useStore()
console.log(store.state.info) // hello
// 修改info的值
const handleClick = () => {
// 触发mutations,用于同步修改state的信息
// store.commit('updateInfo', 'nihao')
// 触发actions,用于异步修改state的信息
store.dispatch('updateInfo', 'hi')
}
return { handleClick }
}
}
</script>
1、模块化
基于原 index.js 代码进行改造拆分,假设有两个模块 global(全局的) 和 user(局部的),新建 src/store/modules/global.js 、src/store/modules/user.js 文件。
// 拆分后代码如下(src/store/modules/global.js)
// 全局store, 存放全局使用共享的数据
export default { // 注意:全局模块中不需要开启命名空间
state: {},
mutations: {},
actions: {},
getters: {}
}
// 拆分后代码如下(src/store/modules/user.js)
// 用户信息模块(局部模块)
export default {
namespaced: true, // 开启命名空间
state () {
return {
// 用户信息对象
profile: {
id: '',
nickname: 'yee'
}
}
},
mutations: {
// 定义mutations,用于同步修改状态
updateNickname (state, payload) {
state.profile.nickname = payload
}
},
actions: {
// 定义actions,用于异步修改状态
// 2秒后更新状态
updateNickname (context, payload) {
setTimeout(() => {
context.commit('updateNickname', payload)
}, 2000)
}
},
getters: {
// 定义一个getters
formatNickname (state) {
return 'Hi ' + state.profile.nickname
}
}
}
拆分后代码如下(src/store/index.js):全局模块是解构,局部模块是放到 modules 里
import { createStore } from 'vuex'
// 全局模块
import global from './modules/global'
// 局部模块
import user from './modules/user'
export default createStore({
// 全局模块
...global,
// 局部模块
modules: {
user
}
})
2、组件中对模块化后的store中数据的操作与使用
// 组件模板中获取
<div>获取Store中user模块的getters: {{$store.getters['user/formatNickname']}}</div>
// 组件 script 中获取
import { useStore } from 'vuex'
export default {
setup () {
// Vue3中store类似于Vue2中this.$store
const store = useStore()
console.log(store.state.user.profile.nickname)
// 修改nickname的值
const handleClick = () => {
// 触发mutations,用于同步修改user模块state的信息
store.dispatch('user/updateNickname', 'Yee')
}
return { handleClick }
}
}
可以看这篇文章:https://blog.csdn.net/qq_16139383/article/details/119935755 和 https://blog.csdn.net/weixin_45389051/article/details/118639403
以上是脚本宝典为你收集整理的浅析Vue3中vuex的基本使用、模块化及如何使用mapState/mapGetters和mapActions全部内容,希望文章能够帮你解决浅析Vue3中vuex的基本使用、模块化及如何使用mapState/mapGetters和mapActions所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。