访问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>

最新文章

  1. ABP框架详解(三)Domain
  2. 【JAVA】调用类中的属性
  3. Maven的pom.xml标签详解
  4. Linux统计文件行数
  5. 优化MySchool总结习题
  6. case when完成不同条件的显示
  7. Intel+Ardruino 101
  8. SQL SERVER 数据库表同步复制 笔记
  9. Frank自动化测试
  10. Hex编码 十六进制编码
  11. New Hire Training Experience
  12. adb概览及协议参考
  13. 如何通过js获取iframe框架中的内容
  14. C# 反向生成工具(DAL BLL Modle)
  15. 什么是AJAX? AJAX:”Asynchronous JavaScript and XML”中文意思:异步JavaScript和XML。
  16. OpenNMS安装手册
  17. Leetcode 4.28 Tree Easy
  18. 聊聊 HashMap
  19. DOM confirm setTimeout url刷新
  20. Spring mvc解析

热门文章

  1. Spring Boot 2.x(五):整合Mybatis-Plus
  2. 【Vue.js】加载更多—vue-infinite-scroll
  3. 一统江湖的大前端(5)editorconfig + eslint——你的代码里藏着你的优雅
  4. .NET WebAPI 利用特性捕捉异常
  5. C# 处理PPT水印(一)——添加水印效果(文字水印、图片水印)
  6. Java开发笔记(二十四)方法的组成形式
  7. java数组及数组的插入,删除,冒泡算法
  8. #WEB安全基础 : HTML/CSS | 0x7HTML5和W3C验证
  9. 从.Net到Java学习第十篇——Spring Boot文件上传和下载
  10. 关于Skyline沿对象画boundingbox的探讨