文档章节

使用vuex的state状态对象的5种方式

p
 peakedness丶
发布于 2018/12/18 22:20
字数 525
阅读 329
收藏 7

vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试。

下面给大家来贴一下我的vuex的结构

下面是store文件夹下的state.js和index.js内容

//state.js
const state = {
 headerBgOpacity:0,
 loginStatus:0,
 count:66
}
export default state
//index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import actions from './actions'
import getters from './getters'
import mutations from './mutations'
Vue.use(Vuex)
export default new Vuex.Store({
 state,
 actions,
 getters,
 mutations
})

前端全栈学习交流圈:866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈,提升思维能力,群内有大量PDF可供自取,更有干货实战项目视频进群免费领取。

下面开始在test.vue组件当中使用vuex的state状态对象

方式一

<template>
 <div class="test">
  {{$store.state.count}} <!--第一种方式-->
 </div>
</template>
<script type="text/ecmascript-6">
 export default{
  name:'test',
  data(){
   return{ }
  }
 }
</script>
<style>
</style>

方式二

<template>
 <div class="test">
  {{count}} <!--步骤二-->
 </div>
</template>
<script type="text/ecmascript-6">
 export default{
  name:'test',
  data(){
   return{}
  },
  computed:{
   count(){
    return this.$store.state.count; //步骤一
   }
  }
 }
</script>
<style>
</style>

前端全栈学习交流圈:866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈,提升思维能力,群内有大量PDF可供自取,更有干货实战项目视频进群免费领取。

方式三

<template>
 <div class="test">
  {{count}} <!--步骤三-->
 </div>
</template>
<script type="text/ecmascript-6">
 import {mapState} from 'vuex' //步骤一
 export default{
  name:'test',
  data(){
   return{}
  },
  computed:mapState({     //步骤二,对象方式
   count:state => state.count
  })
 }
</script>
<style>
</style>

方式四

<template>
 <div class="test">
  {{count}} <!--步骤三-->
 </div>
</template>
<script type="text/ecmascript-6">
 import {mapState} from 'vuex' //步骤一
 export default{
  name:'test',
  data(){
   return{}
  },
  computed:mapState([    //步骤二,数组方式
   "count"
  ])
 }
</script>
<style>
</style>

方式五

<template>
 <div class="test">
  {{count}} <!--步骤三-->
 </div>
</template>
<script type="text/ecmascript-6">
 import {mapState} from 'vuex' //步骤一
 export default{
  name:'test',
  data(){
   return{}
  },
  computed:{
   ...mapState([       //步骤二,三个点方式
    "count"
   ])
  }
 }
</script>
<style>
</style>

© 著作权归作者所有

共有 人打赏支持
p
粉丝 50
博文 126
码字总数 168578
作品 0
长沙
私信 提问
详解使用vuex的state状态对象的5种方式

vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试。 下面是store文件夹下的state.js和index.js内容 下面开始在test.vue组件当中使用vuex的state状态对象方式一 方...

前端攻城老湿
2018/12/05
0
0
理解vuex -- vue的状态管理模式

vuex是什么? 先引用vuex官网的话: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。...

wenxingjun
2018/07/25
0
0
用vuex写了一个购物车H5页面的示例代码

通过购物车的一个案列,把vuex学习了一篇。 vuex概念浅谈 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可...

前端小攻略
2018/12/31
0
0
简述vue状态管理模式之vuex

了解vuex核心概念请移步 https://vuex.vuejs.org/zh/ 一、初始vuex 1.1 vuex是什么 那么先来看看这两个问题: 什么是vuex?官网说:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 按个...

peakedness丶
2018/11/30
0
0
从概念到实际项目__vuex指北

1,核心概念 1.1 State: 用于数据的存储,是store中的唯一数据源,类似vue中data对象. 单一状态树:用一个对象就包含了所有应用层级状态.每个应用就只包含一个store实例. 计算属性:由于Vuex的状...

suchName
2018/06/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

如何限制用户仅通过HTTPS方式访问OSS?

一、当前存在的问题 当前OSS支持用户使用HTTPS/HTTP协议访问Bucket。但由于HTTP存在安全漏洞。大型企业客户都要求使用HTTPS方式访问OSS,并且拒绝HTTP访问请求。 目前OSS可以通过RAM policy方...

阿里云官方博客
19分钟前
1
0
详解深度学习之经典网络架构——LeNet

一、基本简介 LeNet-5出自论文Gradient-Based Learning Applied to Document Recognition,是一种用于手写体字符识别的非常高效的卷积神经网络。 二、LeNet网络的基本结构 LeNet5 这个网络虽...

AI女神
23分钟前
3
0
日志服务Python消费组实战(二):实时分发数据

场景目标 使用日志服务的Web-tracking、logtail(文件极简)、syslog等收集上来的日志经常存在各种各样的格式,我们需要针对特定的日志(例如topic)进行一定的分发到特定的logstore中处理和...

阿里云云栖社区
23分钟前
2
0
LVM 增加磁盘扩容

sudo parted /dev/sdeparted> mklabel gptparted> mkpart primary lvm ext4 %0 %100parted> printsudo lvmlvm> pvcreate /dev/sde1lvm> vgextend vg-data /dev/sde1lvm> lve......

仪山湖
27分钟前
1
0
Linux挂载本地iso镜像,不联网使用yum命令

上传iso镜像文件到/mnt 目录下 在/mnt目录下创建Server目录 mkdir Server 备份 /etc/yum.repos.d/目录下的repo文件 cd /etc/yum.repos.dmkdir repobakmv *.repo repobak/ 挂载本地iso文件...

AustinYe
28分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部