vuex state使用
2024-09-13 01:05:37
访问vuex中的state值
方式1
<div>{{$store.state.count}}</div>
方式2
<template> <div id="app"> <div>{{count}}</div> </div> </template> <script> export default { computed:{ count(){ return this.$store.state.count //因为store挂载到vue的实例上 所以可用通过this.$store访问 this指vue实例 } } }
方式3
<template> <div id="app"> <div>{{rename}}</div> </div> </template> <script> import {mapState} from 'vuex' export default { computed:{ ...mapState({ 'rename':"count" //通过对象扩展运算符 使用对象 对count 进行重命名 }) } } </script>
方式4
<template> <div id="app"> <div>{{count}}</div> </div> </template> <script> import {mapState} from 'vuex' export default { computed:{ ...mapState(["count"]) //通过扩展运算符 使用数组方式 } } </script>
最新文章
- ABP框架详解(三)Domain
- 【JAVA】调用类中的属性
- Maven的pom.xml标签详解
- Linux统计文件行数
- 优化MySchool总结习题
- case when完成不同条件的显示
- Intel+Ardruino 101
- SQL SERVER 数据库表同步复制 笔记
- Frank自动化测试
- Hex编码 十六进制编码
- New Hire Training Experience
- adb概览及协议参考
- 如何通过js获取iframe框架中的内容
- C# 反向生成工具(DAL BLL Modle)
- 什么是AJAX? AJAX:”Asynchronous JavaScript and XML”中文意思:异步JavaScript和XML。
- OpenNMS安装手册
- Leetcode 4.28 Tree Easy
- 聊聊 HashMap
- DOM confirm setTimeout url刷新
- Spring mvc解析
热门文章
- Spring Boot 2.x(五):整合Mybatis-Plus
- 【Vue.js】加载更多—vue-infinite-scroll
- 一统江湖的大前端(5)editorconfig + eslint——你的代码里藏着你的优雅
- .NET WebAPI 利用特性捕捉异常
- C# 处理PPT水印(一)——添加水印效果(文字水印、图片水印)
- Java开发笔记(二十四)方法的组成形式
- java数组及数组的插入,删除,冒泡算法
- #WEB安全基础 : HTML/CSS | 0x7HTML5和W3C验证
- 从.Net到Java学习第十篇——Spring Boot文件上传和下载
- 关于Skyline沿对象画boundingbox的探讨