vue3.0如何使用computed来获取vuex里数据
更新时间：2023年04月22日 16:29:19 作者：智慧2021
这篇文章主要介绍了vue3.0如何使用computed来获取vuex里数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue3使用computed获取vuex里数据
不再是vue2.0里什么mapGetter,mapState那些复杂的获取方式，
vue3.0里直接使用computed就可以调用vuex里的数据了。喜大普奔。
同时注意，一点，不可以直接使用useStore()方法里的state对象，因为在输出useStore方法的数据中，state是浅灰色的。
浅灰色只可看到，但是不可以直接使用。
如图：
<template>
<div>{{dataList}}</div>
</template>
<script>
import { defineComponent, ref, reactive, toRefs, computed } from "vue";
import { useStore } from 'vuex'
// computed 计算属性
export default defineComponent({
name: "home",
setup(props, ctx) {
let store = useStore()
// 因为store里state是浅灰色的，所以不能直接使用，若要使用store.state.dataList需要computed来调用
console.log(store)
let dataList = computed(()=>{
return store.state.dataList
})
console.log(dataList)
return {
store,
dataList
}
},
});
</script>
<style scoped lang="scss">
</style>
vue3 简单使用vuex
mutations用于更变store中的数据（同步）
如何调用mutations中数据
vue3中取vuex里的数据 需要用 computed获取
使用store.commit(“add”) 来触发vuex里的mutations方法
触发mutations时传递参数：store.commit(“addN”,2) 通过第二个参数
使用action触发某个mutation
使用dispatch
如何使用getters
getter用于对store中的数据进行加工处理形成的新的数据
不会修改store中的原数据 它只起到一个包装器的作用 将store中的数据变一种形式返回出来
1.getter可以对store中已有的数据加工处理之后形成新的数据，类似vue的计算属性
2.store中数据发生改变 getter中的数据也会跟着变化
用计算属性可以获取vuex中的getters中的数据
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了vue之数据交互实例代码，vue中也存在像ajax和jsonp的数据交互，实现向服务器获取数据，有兴趣的可以了解一下2017-06-06
这篇文章主要介绍了 vue3 自定义指令详情，自定义指令分为全局和局部两种类型，大家并不陌生。今天我们就讲讲在 vue3 中，自定义指令定义、使用以及钩子函数都有哪些变化？,需要的朋友可以参考一下2021-11-11
前端经常会用到UI提供的各种图表,推荐阿里的图标库,下面这篇文章主要给大家介绍了关于element使用自定义icon图标的详细步骤,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要为大家详细介绍了Vue移动端实现图片上传及超过1M压缩上传，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
watch的基本用法是在Vue实例中定义一个watch对象,该对象内部包含需要监听的数据项和对应的回调函数，这篇文章主要介绍了vue2中watch的使用,需要的朋友可以参考下2024-01-01
这篇文章主要为大家详细介绍了Vant Uploader实现上传一张或多张图片组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
本文主要介绍了element表格变化后自动刷新的两种方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要介绍了Vue3 封装扩展并简化Vuex在组件中的调用,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-01-01
Nuxt.js是创建Universal Vue.js应用程序的框架。它的主要范围是UI渲染，同时抽象出客户端/服务器分布。我们的目标是创建一个足够灵活的框架，以便您可以将其用作主项目库或基于Node.js的当前项目。2020-03-03
使用vue.js2.0 + ElementUI开发后台管理系统详细教程（二）
这篇文章主要介绍了使用vue.js2.0 + ElementUI开发后台管理系统详细教程（二），非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-01-01
最新评论