vuex之state-状态对象的获取方法（三）

1、在组件的template中直接使用

<h2>{{ $store.state.count }}</h2>

2、在计算属性computed中直接赋值

// 方式1：直接获取computed: {count() {// this指的是main.js中的vue实例对象return this.$store.state.count;}}

3、通过mapState的对象来赋值

// 方式2：利用mapStatecomputed: mapState({// es5写法count: function (state) {return state.count;},// es6写法count: state => state.count})

4、通过mapState的数组来赋值

// 方式3：数组获取computed: mapState(['count'])

5、通过mapState的JSON来赋值

// 方式4：JSON获取computed: mapState({count: 'count'})

PS：一般4和5两种比较常用
完整示例代码

<template><div class="hello"><h1>{{ msg }}</h1><h2>{{ $store.state.count }}</h2><h2>{{count}}</h2><button @click="clickAdd">新增</button></div></template><script>import {mapState} from 'vuex'export default {data () {return {msg: 'Vuex test!'}},// 方式1：在计算属性computed中直接赋值// computed: {//     count() {//         // this指的是main.js中的vue实例对象//         return this.$store.state.count;//     }// },// 方式2：通过mapState的对象来赋值// computed: mapState({//     // es5//     // count: function (state) {//     //     return state.count;//     // },//     // es6//     count: state => state.count// }),// 方式3：通过mapState的对象来赋值// computed: mapState(['count']),// 方式4：通过mapState的JSON来赋值computed: mapState({count: 'count'}),methods: {clickAdd() {//分发action中的add方法this.$store.dispatch('add', 1);}}}</script><style scoped></style>

转载于:https://blog.51cto.com/4547985/2390822

vuex之state-状态对象的获取方法（三）相关推荐

在vue组件中使用vuex的state状态对象的5种方式
下面是store文件夹下的state.js和index.js内容 state.js //state.js const state = {headerBgOpacity:0,loginStatus:0, ...
5.8 设计模式之State(状态)—对象行为型模式
5.8 State(状态)-对象行为型模式参考文章意图状态模式是一种行为设计模式, 改变一个对象的内部状态进而改变其行为. 问题及情景状态模式与有限状态机的概念紧密相关. 其主要思想是程序在任 ...
Vuex中state,getters,mutations的使用方法以及辅助函数的原理
Vuex是是一个程序里面的状态管理模式,它是集中式存储所有组件的状态的小仓库,并且保持我们存储的状态以一种可以预测的方式发生变化. state中存放的是全局变量,定义如下 state: {//存放全局 ...
php 获取数组变量个数组的长度,php数组长度的获取方法(三个实例)
本节内容: php数组长度的获取方法 PHP中有两个内建的函数:count() 和sizeof(),可以得到数组的长度. 例1: 复制代码代码示例: $colorList = array(" ...
event对象获取方法总结在google浏览器下测试
简介: Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! Event对象的获取方法: 方法一 ...
arcpy投影(二)——基准面变换概念及参数、空间参考对象获取、变换关系获取方法梳理与解析（Spatial Reference、ListTransformations）
arcpy投影这一个专题从文件位置.文件含义.空间参照获取.转换关系查询.投影定义.自定义转换关系.投影变换这几个角度上系统的进行了介绍,整理出了: arcpy投影(一)--prj.gtf文件定义.路 ...
Vuex统一管理状态
1.vuex 是什么实现数据共享是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享. 概念:在 Vue 中实现集中式状态(数据)管理的一个 Vue 插件,对 vue 应用中 ...
jmh学习笔记-State共享对象
系列文章目录 jmh学习笔记-源代码编译与bench mode jmh学习笔记-State共享对象 jmh学习笔记-State共享对象前后置方法 jmh学习笔记-代码清除 jmh学习笔记-常量折叠 j ...
【struts2】struts2中对象的获取
========================================== 在后台如何获取对象: ========================================== 方法一 ...

vuex之state-状态对象的获取方法（三）

1、在组件的template中直接使用

2、在计算属性computed中直接赋值

3、通过mapState的对象来赋值

4、通过mapState的数组来赋值

5、通过mapState的JSON来赋值

vuex之state-状态对象的获取方法（三）相关推荐

最新文章

热门文章