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

更新时间：2018年08月27日 14:28:24 作者：E_li_na

今天小编就为大家分享一篇Vuex 在Vue 组件中获得Vuex 状态state的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

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的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue页面切换过渡transition效果
这篇文章主要介绍了vue页面切换过渡transition效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-10-10
vue用FileSaverJs导出文件
FileSaver.js 是在客户端保存文件的解决方案，非常适合在客户端上生成文件的 Web 应用，它是 HTML5 版本的 saveAs() FileSaver 实现，这篇文章主要介绍了vue用FileSaverJs导出文件,需要的朋友可以参考下
2023-09-09
vue3如何使用eventBus订阅发布模式
EventBus是一种发布/订阅事件设计模式的实践,下面这篇文章主要给大家介绍了关于vue3如何使用eventBus订阅发布模式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-09-09
Vue中使用matomo进行访问流量统计的实现
这篇文章主要介绍了Vue中使用matomo进行访问流量统计的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
自定义elementui上传文件以及携带参数问题
这篇文章主要介绍了自定义elementui上传文件以及携带参数问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-08-08
vue对storejs获取的数据进行处理时遇到的几种问题小结
这篇文章主要介绍了vue对storejs获取的数据进行处理时遇到的几种问题小结,需要的朋友可以参考下
2018-03-03
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
这篇文章主要介绍了Vue.js应用回退或刷新界面时提示用户保存修改问题，本文通过两种手段防止运营编辑时丢失数据，具体内容详情，感兴趣的朋友跟随小编一起看看吧
2019-11-11
vue关于this.$refs.tabs.refreshs()刷新组件方式
这篇文章主要介绍了vue关于this.$refs.tabs.refreshs()刷新组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
vue3自定义指令看完这篇就入门了
不同于vue2不需要被use使用,vue3的机制是你的指令必须要被注册成方法的,这样你才能全局使用到自定义指令,下面这篇文章主要给大家介绍了关于vue3自定义指令的相关资料,需要的朋友可以参考下
2022-11-11
Vuex实现计数器以及列表展示效果
这篇文章主要为大家详细介绍了Vuex实现计数器以及列表展示效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-03-03