跟着文档学Vuex(二):状态读取

Vuex使用单一状态树,用一个对象就包含了全部的应用层级状态,那么如何获取状态呢,最简单的方法就是在“计算属性”中返回某个状态

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

每当store.state.count变化时,都会重新请求计算属性,并且出发相关dom更新。
下面是子组件中的用法,在根实例中注册store

Vue.use(Vuex)
new Vue({
  store
})

下面在每个子组件中,使用this.$store.state.count就可以访问到

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

是不是很简单

mapState 辅助函数

当你的一个组件需要获取多个状态时,一个一个声明计算属性会有些重复和冗余,使用mapState,就会帮助我们自动生成,节省很多时间

import { mapState } from 'vuex'

export default {
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态,必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

//当计算属性名称和state子节点名称相同时,我们可以传一个字符串数组
computed: mapState([
  'count1','count2'
])

//一般computed里还有其他计算属性,这是我们要混合使用的话,可以使用对象展开运算符
computed: {
  localComputed () {....},
  ...mapState({  //或者这里改为数组
     countAlias: 'count'
  })
}

以上就是Vuex中 state数据的读取方法,通过this.store.state[key]获取我们想要的参数,同时在computed里返回就可以得到啦,同时还有一个mapState供我们在需要获取很多数据的时候使用,下一节,我们将介绍getter的用法~

引用

https://vuex.vuejs.org Vuex官方文档

推荐阅读更多精彩内容

  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 1,986评论 0 6
  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 1,988评论 0 7
  • vuex 场景重现:一个用户在注册页面注册了手机号码,跳转到登录页面也想拿到这个手机号码,你可以通过vue的组件化...
    sunny519111阅读 5,877评论 6 110
  • Vuex 的学习记录 资料参考网址Vuex中文官网Vuex项目结构示例 -- 购物车Vuex 通俗版教程Nuxt....
    流云012阅读 901评论 0 7
  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应...
    白水螺丝阅读 3,858评论 7 61