深入了解Vuex中的State和Getter

青灯夜游

发布： 2021-11-24 19:54:55

转载

1999人浏览过

vuex 的内脏由五部分组成：state、getter、mutation、action 和 module。本篇文章先带大家深入了解一下vuex中的state和getter，希望对大家有所帮助！

深入了解Vuex中的State和Getter

Vuex_State

Vuex是vue的状态管理工具，为了更方便的实现多个组件共享状态。【相关推荐：《vue.js教程》】

安装

npm install vuex --save复制代码

登录后复制

import Vue from 'vue';import Vuex from 'vuex';

Vue.use(Vuex);const store = new Vuex.Store({  state: {    count: 0
  }
})new Vue({
  store,
})

登录后复制

单一状态树，使用一个对象就包含了全部的应用层级状态。

Vuex 通过store 选项，提供了一种机制将状态从跟组件“注入”到每一个子组件中（调用Vue.use(Vuex)）。

通过在根实例中注册store选项，该store实例会注入到根组件下的所有子组件中，且子组件能通过this.$store访问。

<div class="home">
  {{ $store.state.count }}</div>复制代码

登录后复制

当一个组件需要获取多个状态时，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用mapState辅助函数帮助我们生成计算属性：

import { mapState } from 'vuex';

computed: {
  ...mapState(['count']),
},

登录后复制

使用不同的名字：

PHP5 和 MySQL 圣经

本书是全面讲述PHP与MySQL的经典之作，书中不但全面介绍了两种技术的核心特性，还讲解了如何高效地结合这两种技术构建健壮的数据驱动的应用程序。本书涵盖了两种技术新版本中出现的最新特性，书中大量实际的示例和深入的分析均来自于作者在这方面多年的专业经验，可用于解决开发者在实际中所面临的各种挑战。

466

computed: {
  ...mapState({
    storeCount: state => state.count,
     // 简写
    storeCount: 'count',  // 等同于 state => state.count
  }),
},

登录后复制

store的计算属性。getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

Getter 接收state作为其第一个参数、getters作为其第二个参数。

getters: {
  doubleCount (state) {    return state.count * 2;
  }
}

登录后复制

Getter会暴露为store.getters对象：this.$store.getters.doubleCount

也可以让getter返回一个函数，来实现给getter传参

getters: {
  addCount: state => num => state.count + num;
}

登录后复制

this.$store.addCount(3);

登录后复制

import { mapsGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters([
      'doubleCount',
      'addCount',
    ])
  }
}

登录后复制

如果你想将一个 getter 属性另取一个名字，使用对象形式：

mapGetters({
   // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount` 
  storeDoubleCount: 'doubleCount'
})

登录后复制

更多编程相关知识，请访问：编程入门！！

以上就是深入了解Vuex中的State和Getter的详细内容，更多请关注php中文网其它相关文章！

如何系统学习Vue.js从基础到高级如何用Vue.js开发一个医疗预约系统学习Vue.js怎么提高代码质量 Vue的$emit和$on方法如何实现事件总线？ Vue.js开发社交平台的前端架构设计