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中的数据

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 前端实现简单的sse封装方式(React hook Vue3)

    前端实现简单的sse封装方式(React hook Vue3)

    这篇文章主要介绍了前端实现简单的sse封装方式(React hook Vue3),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue-loader中引入模板预处理器的实现

    vue-loader中引入模板预处理器的实现

    这篇文章主要介绍了vue-loader中引入模板预处理器的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • 详解vue父子组件间传值(props)

    详解vue父子组件间传值(props)

    本篇文章主要介绍了详解vue父子组件间传值(props),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • vue打包的时候自动将px转成rem的操作方法

    vue打包的时候自动将px转成rem的操作方法

    这篇文章主要介绍了vue打包的时候自动将px转成rem的操作方法,需要的朋友可以参考下
    2018-06-06
  • vue/cli安装报错及解决问题的方法图文详解

    vue/cli安装报错及解决问题的方法图文详解

    这篇文章主要给大家介绍了关于vue/cli安装报错及解决问题的方法,如果在安装@vue/cli时遇到错误,大家可以尝试以下步骤解决,需要的朋友可以参考下
    2023-07-07
  • vue实现excel表格的导入导出的示例

    vue实现excel表格的导入导出的示例

    本文主要介绍了vue实现excel表格的导入导出的示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • 解决element ui el-row el-col里面高度不一致问题

    解决element ui el-row el-col里面高度不一致问题

    这篇文章主要介绍了解决element ui el-row el-col里面高度不一致问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue-devtools 开发工具插件之支持vue3 chrome 浏览器插件

    vue-devtools 开发工具插件之支持vue3 chrome 浏览器插件

    这篇文章主要介绍了vue-devtools 开发工具插件之支持vue3 chrome 浏览器插件,用这个版本主要是为了支持vue3 推荐直接下载,文中给大家提供了下载地址,感兴趣的朋友跟随小编一起看看吧
    2022-01-01
  • Vue3+script setup+ts+Vite+Volar搭建项目

    Vue3+script setup+ts+Vite+Volar搭建项目

    本文主要介绍了Vue3+script setup+ts+Vite+Volar搭建项目,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • Vue项目中在父组件中直接调用子组件的方法

    Vue项目中在父组件中直接调用子组件的方法

    这篇文章主要给大家介绍了Vue项目中如何在父组件中直接调用子组件的方法,文章通过代码示例介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-11-11

最新评论