在vue组件中使用vuex的state状态对象的5种方式

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

state.js

//state.js
const state = {headerBgOpacity:0,loginStatus:0,count:66
}export default state

index.js

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

在vue组件中使用vuex的state状态对象的5种方式相关推荐

Vuex---在 Vue 组件中获得 Vuex 状态state
Vuex使用单一状态树(一个对象就包含了全部的应用层级状态),它作为唯一数据源存在,每个应用仅仅有一个store实例. 单一状态树使得我们能够直接定位任一特定的状态片段,在调试过程中也能轻易地取得整个 ...
在 vue 组件中查看 vuex 定义
原文:在 vue 组件中查看 vuex 定义在进行 vue 项目开发的时,如果项目中用到了 vuex 做状态管理,经常需要查看 store 里面定义的状态属性.但是在 vue 组件中引用这些 vue ...
vue组件中数据共享——vuex
目录 vuex是什么? 使用vuex统一管理状态的好处什么样的数据适合存储到vuex中安装vuex 使用vuex vuex核心概念组件访问state中数据的第一种方式: 组件访问state中数据 ...
JavaScript中创建数组（Array）对象的两种方式
一.使用Array构造函数创建数组对象 <!DOCTYPE html> <html lang="en"> <head><meta char ...
java socket中属性详解_前端开发：关于Vue组件中的data属性值是函数而不是对象的详解...
最近在搞关于前端开发的基础知识归纳,发现了不少经典知识点,那么本篇博文就来分享一个经典的知识点:Vue组件中的data属性值为什么是函数而不是对象.首先来了解一下Vue组件的使用理念:在Vue组件使用 ...
Vue组件间通信--Vuex
1.概念在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信. 2.何时使用? 多 ...
在vue项目中引用vuex状态管理工具
在vue项目中引用vuex状态管理工具一.vuex是什么? 二.使用步骤 1.引入库 2.在main.js文件引入配置 3.配置store/index.js文件 4.获取state数据 5.获取ge ...
vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
[vue] 组件中写name选项有什么作用？
[vue] 组件中写name选项有什么作用? 项目使用keep-alive时,可搭配组件name进行缓存过滤 DOM做递归组件时需要调用自身name vue-devtools调试工具里显示的组见名称是 ...

在vue组件中使用vuex的state状态对象的5种方式

在vue组件中使用vuex的state状态对象的5种方式相关推荐

最新文章

热门文章