开发者社区> 马家堡梅西> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

在 Vue 组件中获得 Vuex 状态

简介:
+关注继续查看

那么我们如何在 Vue 组件中展示状态呢?由于 Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态:

// 创建一个 Counter 组件
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}

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

然而,这种模式导致组件依赖全局状态单例。在模块化的构建系统中,在每个需要使用 state 的组件中需要频繁地导入,并且在测试组件时需要模拟状态。

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

const app = new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})

通过在根实例中注册 store 选项,该 store 实例会注入到根组件下的所有子组件中,且子组件能通过 this.$store 访问到。让我们更新下 Counter 的实现:

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
初识 Vue(05)---(组件间传值)
组件间传值(改进 TodoList) 改进 TodoList ,点击那个输出 ,那个输出就会消失 步骤一 TodoList 提交 ...
779 0
vue 组件间传值
1、父组件给子组件传值 父组件: &lt;template&gt; &lt;child :name="name"&gt;&lt;/child&gt; &lt;/template&gt; &lt;script&gt; import child from ".
590 0
vue组件传值的概括图
vue组件传值的概括图
0 0
知道vue组件同级传值吗?
知道vue组件同级传值吗?
0 0
vue-组件传值
组件传值 不管 vue 还是react 亦或某个框架都是重点 记得有篇文章写了 ,其实有些情况 完全可以用 js自带 dataset来传值哦
0 0
VUE element-ui之百度OCR证件识别,组件内证件照转码解码识别身份证照文字
VUE element-ui之百度OCR证件识别,组件内证件照转码解码识别身份证照文字
0 0
Vue之Vant移动端组件库使用方法
Vue之Vant移动端组件库使用方法
0 0
我明白了,vue父子组件生命周期顺序
vue的生命周期是官方公布的一系列的钩子,其实你只需要知道这些钩子在什么时候使用就可以了。但是有时你会发现,给子组件传值传一个复杂对象的时候,感觉明明传了,但子组件中遍历取值的还是会报错,甚至需要在子组件中去做if else之类的判断。 当然如果你给子组件设置props时加上合适的数据类型以及默认值,那么也没多大事儿,但是这是基于vue生命周期出现的问题,也许你了解了这个生命周期后,可以更优雅的解决这个问题噢。
0 0
Vue中如何自定义组件实现组件化开发(案例步骤及组件传值)
在前端项目中,对于大面积可以复用的地方我们通常对其进行组件化的封装,从而提高代码复用率,简化开发,也便于后期对代码进行维护和修改。
0 0
Vue组件入门(十)Attributes 继承
Vue组件入门(十)Attributes 继承
0 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
利用编译将 Vue 组件转成 React 组件
立即下载
基于VUE的单页面性能优化实践
立即下载
产品经理的硬技能——业务建模
立即下载