vue3.0如何使用computed来获取vuex里数据
作者：智慧2021 发布时间：2024-04-28 09:24:20
标签：vue3,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中的数据
来源：https://blog.csdn.net/weixin_38687522/article/details/117564844
0
投稿猜你喜欢
- 昨天，系统管理员告诉我，我们一个内部应用数据库所在的磁盘空间不足了。我注意到数据库事件日志文件XXX_Data.ldf文件已经增长到了3GB
- 要注意的是记得要先引用element操作模块 ，否则是无法绑定的格式：$(document).on(事件，标识，function(){});
前言Python是一门实现数据可视化很好的语言，他们里面的很多库可以很好的画出图形，形象明了。今天我们就来说说:Pandas数据分析核心支持- NumPy矩阵和向量矩阵在NumPy中，矩阵可以看作是一个二维数组，其中每个元素都可以通过行列坐标来定位。它表示为一个m×
- MySQL8服务无法正常启动的解决(1053错误)第一种方法初始化后在Mysql的根目录会生成 data 数据库文件夹，如果启动服务失败，很
- Python 文件操作的详解及实例一、文件操作1、对文件操作流程打开文件，得到文件句柄并赋值给一个变量通过句柄对文件进行操作关闭文件现有文件
- 同时在线访问量继续增大 对于1G内存的服务器明显感觉到吃力严重时甚至每天都会死机 或者时不时的服务器卡一下 这个问题曾经困扰了我半个多月My
- 1. 背景在深度学习的任务中，通常需要比较复杂的参数以及输入输出配置，比如需要不同的训练data，不同的模型，写入不同的log文件，输出到不
- 本文实例讲述了Python minidom模块用法。分享给大家供大家参考，具体如下：一、DOM写XML文件# -*- coding:utf-
- Tag，直译标签，是一种由用户自定义的、用于描述信息 [1]的关键词。Tagging是用户为信息赋予Tag的行为。Delicious，Fli
- Django自带强大的User系统，为我们提供用户认证、权限、组等一系列功能，可以快速建立一个完整的后台功能。但User模型并不能满足我们的
- 1.运行效果如图所示2.实现代码如下<!DOCTYPE html><html><head> <me
- 1.什么是Store？上一篇文章说了，Vuex就是提供一个仓库，Store仓库里面放了很多对象。其中state就是数据源存放地，对应于与一般
- 通过phpmyadmin连接mysql数据库时提示：“2003 无法登录 MySQL服务器”。。。很明显这是没有启动mysql服务，右击我的
- 其实这个东西没什么技术含量，就是给大家提供一个给表格加滚动条的思路。运行代码框<html><head><tit
- 上一篇文章讲解了如何实现马丁策略，但没有探索其泛化能力，所以这次来尝试回测3000只股票来查看盈利比例。批量爬取股票数据这里爬取数据继续使用
- 我用的是Anaconda3 ，用spyder编写pytorch的代码，在Anaconda3中新建了一个pytorch的虚拟环境（虚拟环境的名
- 1. 如何阻止事件冒泡 //非IE if (event && event.stopPropagation) event.st
- 元组（Tuple）元组是有序且不可更改的集合。在 Python 中，元组是用圆括号编写的。实例创建元组：thistuple = ("
- 众所周知，如果py文件不在当前路径，那么就不能import，因此，本文介绍如下两种有效的方法：方法1：修改环境变量，在~/.bashrc里面
