标签：city vue getters state getter 模块 vuex store 属性

store的结构：

 

 city模块：

 

 在各模块使用了命名空间的情况下，即 namespaced: true 时：

组件中访问模块里的state

传统方法：

this.$store.state['模块名']['属性名']

例如：this.$store.state.city.list。

控制台输出 this.$store.state

 

 mapState方法：

import { mapState } from 'vuex'
computed: {
    // ...
    ...mapState({
      list: state => state.city.list
    })
  }

组件中dispatch模块里的actions

传统方法：

// @params:opts Object or String 
this.$store.dispatch('模块名/属性名', opts)

组件中使用如：this.$store.dispatch('city/add', '上海')

mapActions方法：

引入：import { mapActions } from 'vuex'

 methods中的属性名可以更改成其他任意名字，但是属性值需要和模块名，actions属性名对应。

在组件中访问模块里的getter

传统方法：

this.$store.getters['模块名/属性名']

如：this.$store.getters['city/findOne']('a')

mapGetters方法:

引入：import { mapGetters } from 'vuex'

这个getter返回的是一个函数，这样可以给getter传参。此时getter通过方法访问时，每次都会去进行调用，而不会缓存结果。

而getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的。

转自：https://www.cnblogs.com/caimuguodexiaohongmao/p/11854228.html

标签：city,vue,getters,state,getter,模块,vuex,store,属性
来源： https://www.cnblogs.com/vickylinj/p/14376757.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。