基础概念

获取状态mapState

1 .在获取状态的时候,mapState([]),在计算属性里面可以直接映射state里面的东西

...mapState(
            ['searching']
        )

2 .参数为对象的时候,箭头函数可以让代码非常简洁,也可以对state中的变量做一些参数判断

computed: mapState({
    count: state => state.count,
    countAlias: 'count',
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })

mapGetter

1 .对state里面的数据进行计算,派生出一些状态,例如对列表进行过滤并计算
2 .store的计算属性,getter的返回值会跟他的依赖被缓存起来,且只有当他的依赖值发生了改变之后才会被重新计算
3 .getter会暴露为store.getters对象,一开始的mapGetter方法其实是提取的这个对象里面的方法
4 .getter可以接收其他的getter作为第二个参数
5 .也可以通过让getter返回一个函数,来实现getter传参。在你对store里的数组进行查询的时候非常有用
6 .getter在通过方法访问的时候,每次都会进行调用,而不会缓存结果
7 .mapGetters辅助函数仅仅是将store中的getter映射到局部计算属性,如果想要继续重命名,需要采取对象形式

Mutation

1 .mutation的使用也需要和Vue一样遵循一些注意事项
2 .提前在store中初始化好所需要的属性
3 .mutation必须是同步函数,不能进行异步操作,在Vue中,mutation都是同步事物

状态管理模式

1 .多个视图依赖同一状态:传参的方法对于多层嵌套的组件会非常繁琐,而且对于兄弟间的状态传递也是无能为力
2 .来自不同视图的行为需要变更为同一状态:可以采用父子组件直接引用或者事件来变更和同步状态的多份拷贝,但是这些会非常脆弱,通常会导致无法维护的代码
3 .

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 使用说明-Vuex 安装 直接下载 / CDN 引用 Unpkg.com 提供了基于 NPM 的 CDN 链接。以...
    满是裂缝的花卷阅读 4,626评论 0 8
  • ### store 1. Vue 组件中获得 Vuex 状态 ```js //方式一 全局引入单例类 // 创建一...
    芸豆_6a86阅读 3,043评论 0 0
  • ### store 1. Vue 组件中获得 Vuex 状态 ```js //方式一 全局引入单例类 // 创建一...
    芸豆_6a86阅读 4,042评论 0 3
  • VUE Vue :数据驱动的M V Vm框架 m :model(后台提供数据),v :view(页面),vM(模板...
    wudongyu阅读 10,768评论 0 11
  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 8,040评论 0 7

友情链接更多精彩内容