首页 > 其他分享 >如何提供 或 访问 vuex 的数据、mutations

如何提供 或 访问 vuex 的数据、mutations

时间:2023-10-12 22:47:10浏览次数:34  
标签:数据 mutations 访问 state 组件 vuex store

目标:明确如何给仓库提供数据,如何使用仓库的数据

一、提供数据:

State 提供唯一的公共数据源,所有共享的数据都要统一放到 Store 中的 State 中存储。在 state 对象中可以添加我们要共享的数据。

 

// state : 状态,即数据,类似于 vue 组件中的 data(区别:data 是组件自己的数据,state 是所有组件共享的数据)

const store = new Vuex.Store({

      state : {

            count : 101

      }

})

 

二、使用数据:

1. 通过 store 直接访问:

// 获取 store:this.$store 或 import 导入 store

 

模板中:{{ $store.state.count }}

组件逻辑中:this.$store.state.count

JS 模块中:store.state.count

 

2. 通过辅助函数(简化):

mapState 是辅助函数,帮助我们把 store 中的数据 自动 映射到 组件的计算属性中

1. 导入 mapState:import { mapState } from 'vuex'

2. 以数组的形式引入 state

3. 展开运算符映射

 

------------------------------------------------------------------------------------------------------------------------------------

 

mutations:修改仓库的数据

知识点:vuex 同样遵循单项数据流,组件中不能直接修改仓库的数据。应该通过 mutations 进行修改数据

 

标签:数据,mutations,访问,state,组件,vuex,store
From: https://www.cnblogs.com/gagaya2/p/17760778.html

相关文章

  • FastDFS+Nginx - 本地搭建文件服务器同时实现在外远程访问「端口映射」 转载
    前言FastDFS是一个开源的轻量级分布式文件系统,它对文件进行管理,功能包括:文件存储、文件同步、文件访问(文件上传、文件下载)等,解决了大容量存储和负载均衡的问题。特别适合以文件为载体的在线服务,如相册网站、视频网站等等。FastDFS为互联网量身定制,充分考虑了冗余备份、负载均衡......
  • 基于 ACK Fluid 的混合云优化数据访问(四):将第三方存储目录挂载到 Kubernetes,提升效率和
    作者:车漾前文回顾:本系列将介绍如何基于ACKFluid支持和优化混合云的数据访问场景,相关文章请参考:-基于ACKFluid的混合云优化数据访问(一):场景与架构-基于ACKFluid的混合云优化数据访问(二):搭建弹性计算实例与第三方存储的桥梁-基于ACKFluid的混合云优化数据访问(三):加速......
  • Spring Boot 跨域访问
    出于安全的考虑,浏览器会禁止Ajax访问不同域的地址,在现如今微服务横行的年代,跨域访问是非常常见的。W3C的CORS(Cross-origin-resource-sharing)规范中也已经允许跨域访问,并被主流浏览器所支持,它们包括:Chrome3+;Firefox3.5+;Opera12+;Safari4+;IE8+;如何在Sp......
  • UOS&windows远程协助:使用xrdp实现远程访问和远程控制
    1.xrdp与vnc的区别在很多场景下,我们需要在局域网内,远程连接到Linux服务器或桌面系统,传统的连接方式主要分为两种。第一种:终端命令行,通过SSH服务实现,没有可视化图形界面,很多人技术牛人喜欢这种方式,因为方便快捷。第二种:图形用户界面,通过xrdp或vnc服务实现,提供可视化图......
  • vuex 的使用
    vuex是一个插件,可以帮我们管理vue通用的数据(多组件共享的数据) 应用场景:1.某个状态在很多个组件来使用(个人信息)2.多个组件共同维护一份数据(购物车) vuex的优势:1.共同维护一份数据,数据集中化管理2.响应式变化3.操作简洁(vuex提供了一些辅助函数)  vuex的使......
  • CF882E1+CF1882E2 Two Permutations 题解-构造题
    CF882E1+CF1882E2TwoPermutations题解-构造题哇,人类智慧,太智慧了。。。此题作为20231010联考的T3。感觉赛时根本没有去往这方面想。CF1882E1CF1882E2E1是简单版,就是没有要求操作数最小化。E1-EasyVersion方法1首先考虑没有次数限制的,对于单独的每一个串的情况。......
  • 在'for'循环中访问索引
    内容来自DOChttps://q.houxu6.top/?s=在'for'循环中访问索引在for循环中遍历序列时如何访问索引?xs=[8,23,45]forindex,xinenumerate(xs):print("item#{}={}".format(index,x))期望的输出:item#1=8item#2=23item#3=45使用内置函数enumera......
  • ndk开发之native层访问java层
    一.native层访问java层的成员变量java层的成员变量可以分为实例变量和静态变量,不过他们的访问方法比较类似,可以分为以下三步:获取java类对应的jclass对象获取需要访问的成员变量的jfieldID根据需要访问的变量的类型,调用setXXXField()/getXXXField()方法来设置/获取成员变......
  • 基于 ACK Fluid 的混合云优化数据访问(三):加速第三方存储的读访问,降本增效并行
    作者:车漾前文回顾:本系列将介绍如何基于ACKFluid支持和优化混合云的数据访问场景,相关文章请参考:基于ACKFluid的混合云优化数据访问(一):场景与架构基于ACKFluid的混合云优化数据访问(二):搭建弹性计算实例与第三方存储的桥梁在前一篇文章《搭建弹性计算实例与第三方存储的......
  • 浏览器可直接访问 Dubbo、gRPC 后端微服务,Dubbo-js 首个alpha 版本来了!
    作者:蔡建怿基于Dubbo3定义的Triple协议,你可以轻松编写浏览器、gRPC兼容的RPC服务,并让这些服务同时运行在HTTP/1和HTTP/2上。DubboTypeScriptSDK[1]支持使用IDL或编程语言特有的方式定义服务,并提供一套轻量的APl来发布或调用这些服务。Dubbo-js已于9月份......