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


Posted in Javascript onAugust 27, 2018

Vuex使用单一状态树(一个对象就包含了全部的应用层级状态),它作为唯一数据源存在,每个应用仅仅有一个store实例。

单一状态树使得我们能够直接定位任一特定的状态片段,在调试过程中也能轻易地取得整个当前应用状态的快照。

在Vue组件中获得Vuex状态

Vuex的状态存储是相应式的。在Vue组件中获取Vuex状态总共有 五种 可行的方法。

1.从store实例中读取状态最简单的方法就是在计算属性中返回某个状态:(需要导入store组件)

const Counter={
 template:`<div>{{ count }}</div>`,
 computed:{
 count(){
  return store.state.count//返回store实例的count状态
 }
 }
}

每当store.state.count发生变化,都会重新求取计算属性,并且出发更新相关联的DOM

缺点:这种模式导致组件依赖全局状态单例。在每个需要state的组件中需要频繁地导入,并且在测试组件时需要模拟状态。

Vuex通过store选项,提供了一种机制将状态从根组件注入到每一个子组件中,前提是要调用Vue.use(Vuex)

const app=new Vue({
 el:'#app',
 store,//根组件通过store选项将store实例注入所有地子组件
 components:{ Counter },
 template:`
 <div class="app">
  <Counter><Counter>
 </div>
 `
})

上面的代码能够让子组件通过this.$store访问到store实例。

2.于是,Counter组件可以按照下面的实现来访问store,而不用频繁导入state的组件。

const Counter={
 template:`<div>{{ counter }}</div>`,
 computed:{
 count(){
  return this.$state.count
 }
 }
}

mapState辅助函数(用于获取多个state状态)

当一个组件需要获取多个状态的时候,将这些状态都声明为计算属性会有些重复和冗余(如上面代码的count函数),避免这个问题,

3.我们可以用mapState辅助函数帮助我们生成计算属性,让我们少敲几个健:

import { mapState } from 'vuex'
export default{
 computed:mapState({
 //方式一:箭头函数
 count:state => state.count,
 //方式二:传字符串参数
 countAlias:'count',
 //如果要使用this获取局部状态,就要使用常规函数了!
 countPlusLocalState(state){
 return state.count+this.localCount
 }
 })
}

4.如果映射的计算属性的名称与state的子节点相同时,我们给mapState传一个字符串数组。

computed:mapState([
 'count'
])

5.对象展开运算符

上面的3、4都是mapState单独使用在computed属性中,但是如果要和普通的局部计算属性混合使用的时候,我们用对象展开运算符(…)

import { mapState,mapGetter } from 'vuex'
export default{
 methods:{
 increment(){
  this.$store.commit('increment');
 }
 },
 computed:{
 elsecomputed(){},//这是普通的局部计算属性
 ...mapGetters([
  'count'
 ]),
 ...mapState({
  counts(){
   return this.$store.state.count;
  }
  }
 })
 }
}

并不需要把所有状态都放到Vuex,有些状态严格属于单个组件,最好是作为组件的局部状态,要根据应用开发进行权衡和确定。

以上这篇Vuex 在Vue 组件中获得Vuex 状态state的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 判断指定字符串是否为有效数字
May 11 Javascript
jquery ajax同步异步的执行最终解决方案
Apr 26 Javascript
js控制frameSet示例
Sep 10 Javascript
Javascript遍历table中的元素示例代码
Jul 08 Javascript
jquery实现的树形目录实例
Jun 26 Javascript
学习JavaScript设计模式(链式调用)
Nov 26 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
Mar 25 Javascript
AngularJS入门教程之静态模板详解
Aug 18 Javascript
jQuery 全选 全不选 事件绑定的实现代码
Jan 23 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 Javascript
vue设置一开始进入的页面教程
Oct 28 Javascript
Node.js API详解之 net模块实例分析
May 18 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 #Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 #Javascript
vue中子组件的methods中获取到props中的值方法
Aug 27 #Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 #Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
Aug 27 #Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 #Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 #Javascript
You might like
探讨php中header的用法详解
2013/06/07 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
javascript RadioButtonList获取选中值
2009/04/09 Javascript
js 匿名调用实现代码
2009/06/19 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
2014/03/18 NodeJs
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
浅谈jquery回调函数callback的使用
2015/01/30 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
JavaScript常用字符串与数组扩展函数小结
2016/04/24 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
了解JavaScript中的选择器
2019/05/24 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
浅谈Python 函数式编程
2020/06/20 Python
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
JBL英国官网:JBL UK
2018/07/04 全球购物
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
中医专业应届生求职信
2013/11/17 职场文书
会计专业自荐信
2013/12/02 职场文书
旅游专业职业生涯规划范文
2014/01/13 职场文书
《灯光》教学反思
2014/02/08 职场文书
健康教育评估方案
2014/05/25 职场文书
员工升职自荐信
2015/03/27 职场文书
2016年感恩节寄语
2015/12/07 职场文书
2016新教师培训心得体会范文
2016/01/08 职场文书
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis