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中的数据
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
前端实现简单的sse封装方式(React hook Vue3)
这篇文章主要介绍了前端实现简单的sse封装方式(React hook Vue3),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08解决element ui el-row el-col里面高度不一致问题
这篇文章主要介绍了解决element ui el-row el-col里面高度不一致问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08vue-devtools 开发工具插件之支持vue3 chrome 浏览器插件
这篇文章主要介绍了vue-devtools 开发工具插件之支持vue3 chrome 浏览器插件,用这个版本主要是为了支持vue3 推荐直接下载,文中给大家提供了下载地址,感兴趣的朋友跟随小编一起看看吧2022-01-01Vue3+script setup+ts+Vite+Volar搭建项目
本文主要介绍了Vue3+script setup+ts+Vite+Volar搭建项目,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2021-08-08
最新评论