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

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
})

下面开始在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>

方式三

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

以上是使用vuex的state状态对象的5种方式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • StateMachine 状态机机制深入解析

    前言 Spring StateMachine 让状态机结构更加层次化,可以帮助开发者简化状态机的开发过程. 之前,我们使用二维数组实现状态机机制,现在,我们来用 Spring StateMachine 进行改造. 环境依赖 修改 POM 文件,添加 spring-statemachine-core 依赖. <dependency> <groupId>org.springframework.statemachine</groupId> <artifactId>

  • java 设计模式之State(状态模式）

    java 设计模式之State(状态模式）

    java 设计模式之State(状态模式) 在状态模式中,一个类的行为基于它的状态的改变而改变.状态模式归属于行为型模式. 在下面的实例中,我们创建了一个接口State,定义了一个操作方法,两个实现类StartState和StopState.另外,创建了一个上下文类Context,这个类关联到State类.UML类图如下所示: //状态类 public interface State { public void doAction(Context context); } //实现类StartSta

  • 状态保存机制之ViewState概述及应用

    状态保存机制之ViewState概述及应用

    无状态Http 无状态的根本原因是:浏览器和服务器使用Socket通信,服务器将请求结果返回给浏览器后,会关闭当前Socket连接.而且服务器会在处理页面完毕后销毁页面对象. 应用层面的原因是:浏览器和服务器之间通信都遵守HTTP协议. 一个浏览者发出的请求都是由实现了IHttpHandler接口的对象进行响应,由于下次访问不一定还是上次那个对象进行响应,上次响应完毕对象可能已经被销毁了,写的类变量值早就不存在了,因此不能将状态信息保存到类变量中. 编写一个ashx 复制代码 代码如下: pri

  • Vuex 在Vue 组件中获得Vuex 状态state的方法

    Vuex使用单一状态树(一个对象就包含了全部的应用层级状态),它作为唯一数据源存在,每个应用仅仅有一个store实例. 单一状态树使得我们能够直接定位任一特定的状态片段,在调试过程中也能轻易地取得整个当前应用状态的快照. 在Vue组件中获得Vuex状态 Vuex的状态存储是相应式的.在Vue组件中获取Vuex状态总共有 五种 可行的方法. 1.从store实例中读取状态最简单的方法就是在计算属性中返回某个状态:(需要导入store组件) const Counter={ template:`<di

  • ajax+php打造进度条 readyState各状态

    用Ajax+php打造进度条,其实很简单. readyState == 状态(0,1,2,3,4) 0:请求未初始化,还没调用open 1:请求已经建立,但还没有发送,还没调用send 2:请求已发送,并且正在处理 3:请求正在处理,通常响应中已有部分数据可调用 4:完毕 复制代码 代码如下: var xmlHttp; function create() if(window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHT

  • Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解

    Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解

    更改 Vuex 的 store 中的状态的唯一方法是提交 mutation. Vuex 中的 mutation 非常类似于事件: 每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler).这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数.mutation 必须是同步函数. 不带载荷(只改变数据的状态) 接前面几篇文章的例子,这里我们修改商品价格减半. store.js mutations: { //商品价格减半:

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

    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' i

  • Vuex拿到state中数据的3种方式与实例剖析

    目录 Ⅰ.Vuex 简介: 1.Vuex 是什么? 2.Vuex 的图例讲解: 3.Vuex 的配置过程: Ⅱ.如何引入并使用 Vuex : Ⅲ.实例剖析在 App.vue 中使用 state 的过程: Ⅳ.小结: Ⅰ.Vuex 简介: 1.Vuex 是什么? 答:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式: 而所谓状态就是指:组件中所维护的数据); (简而言之:就是状态管理,解决复杂组件数据通信,状态共享:) 2.Vuex 的图例讲解: 其一.对 Vue Component

  • javaScript中定义类或对象的五种方式总结

    第一种方式: 工厂方法 能创建并返回特定类型的对象的工厂函数(factory function). function createCar(sColor){ var oTempCar = new Object; oTempCar.color = sColor; oTempCar.showColor = function (){ alert(this.color); }; return oTempCar; } var oCar1 = createCar(); var oCar2 = createCa

  • 详解springmvc 接收json对象的两种方式

    最近学习了springmvc 接收json对象的两种方式,现在整理出来,具体如下: 1.以实体类方式接收 前端 ajax 提交数据: function fAddObj() { var obj = {}; obj['objname'] = "obj"; obj['pid'] = 1 ; $.ajax({ url: 'admin/Obj/addObj.do', method: 'post', contentType: 'application/json', // 这句不加出现415错误:U

  • 详解C#实例化对象的三种方式及性能对比

    详解C#实例化对象的三种方式及性能对比

    前言 做项目过程中有个需求要实例化两万个对象并添加到List 中,这个过程大概需要1min才能加载完(传参较多),于是开启了代码优化之旅,再此记录. 首先想到的是可能实例化比较耗时,于是开始对每种实例化方式进行测试,过程如下 实例化方式 1.用 New 关键字实例化一个类 2.用 Activator 实例化一个类 3.用 Assembly 实例化一个类 代码实现 测试环境: vs2019 .NET Framework 4.7 Intel Core i7-10510U CPU 首先定义一个类Per

  • javascript遍历对象的五种方式实例代码

    目录 准备 五种武器 for-in Object.keys Object.getOwnPropertyNames Object.getOwnPropertySymbols Reflect.ownKeys 总结 扩展 Object.values Object.entries hasOwnProperty propertyIsEnumerable 总结 准备 先来准备一个测试对象obj. 代码清单1 var notEnum = Symbol("继承不可枚举symbol"); var pro

  • 比较JavaScript对象的四种方式

    目录 前言 引用比较 手动比较 浅层比较 深层比较 总结 前言 比较JavaScript中的原始值非常简单.只需使用任何一种可用的相等运算符即可,例如严格相等运算符: 'a' === 'c'; // => false 1 === 1; // => true 但是对象却有结构化数据,所以比较起来比较困难.在本文中,你将学习如何正确比较JavaScript中的对象. 引用比较 JavaScript 提供了 3 种对值进行比较的方法: 严格相等运算符=== 宽松相等运算符== Object.is()

  • JavaScript 对象的四种方式比较详解

    目录 前言 1. 引用比较 2. 手动比较 3. 浅层比较 4. 深层比较 5. 总结 前言 比较 JavaScript 中的值非常简单,只需用相等运算符即可,例如严格相等运算符: 'a' === 'c'; // => false 1 === 1; // => true 但是对象却有结构化的数据,所以比较起来比较困难.在本文中,你将学习如何正确比较 JavaScript 中的对象. 1. 引用比较 JavaScript 提供了 3 种方法来对值进行比较: 严格相等运算符 === 宽松相等运算符

  • 详解C#通过反射获取对象的几种方式比较

    详解C#通过反射获取对象的几种方式比较

    目录 使用标准反射的 Invoke 方法 使用 Activator.CreateInstance 使用 Microsoft.Extensions.DependencyInjection Natasha 使用表达式 Expression 使用 Emit 对比测试 总结 相关链接 在本文中,对比了常见的几种反射的方法,介绍了它们分别应该如何使用,每种的简易度和灵活度,然后做了基准测试,一起看看这之间的性能差距. 按照使用的简易度和灵活度,做了下边的排序,可能还有一些其他的反射方式,比如 Source

  • 关于JavaScript定义类和对象的几种方式

    可以看看这个例子: 复制代码 代码如下: var a = 'global'; (function () { alert(a); var a = 'local'; })(); 大家第一眼看到这个例子觉得输出结果是什么?'global'?还是'local'?其实都不是,输出的是undefined,不用迷惑,我的题外话就是为了讲这个东西的. 其实很简单,看一看JavaScript运行机制就会明白.我们可以把这种现象看做"预声明".但是如果稍微深究一下,会明白得更透彻. 这里其实涉及到对象属性

随机推荐