vuex的mapState和mapGetter

Posted 2023-04-27

参考技术A 1、  vuex中的 getters类似是Vuex中的计算属性，也具有缓存功能：如果state中的数据得到了改变，那么getters中的属性的值也会发生改变，如果state的值没有发生任何变化，那么getters中的属性的值就不会发生改变。

2、通过computed计算属性和@change="changefn"两种方法来渲染表格和对表格信息进行筛选。

3、使用对象展开运算符将 getter 混入 computed 对象中

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

②mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

vuejs + vuex

vuejs 的数据是双向绑定的，而这些数据只是在父组件中，如果各个组件公用的数据就要通过一个容器去管理起来，

vuex是不错的选择，

今天看了下vuex的教程：

  总结下遇到的问题： vue-cli 了一个项目

  import的时候发现了报错：node的版本太低，升级版本就好了。 

import {

mapState,

mapActions,

mapGetters,

map

} from "vuex";//注意大括号。

 

https://github.com/lin-xin/notepad/ 这个例子非常好。 结合了modules的概念

vuex核心

五大核心属性：

• State
• Getters
• Mutations
• Actions
• Modules

四大辅助函数

• mapState
• mapGetters
• mapActions
• mapMutations

运行流程

• State是数据data的存储仓库，可划分为子模块module，每个module有自立的上下文对象context，有自己的state、mutation、action、getters、modules等等体系

• Getters 主要用来从State中获取数据，优点是具有通用性

• Mutations 是用来更新state状态仓库里的数据的，唯一更改数据地方，实时同步修改， 不能异步,不能异步,不能异步

• Actions 主要补充增加 异步更新 state仓库数据的功能，内部依然是触发Mutation来实现

• Modules 为了划分state模块，便于管理数据仓库

注意： Getters，Mutations，Actions无论是不是在module块中，都会直接挂载到 vuex的实例 store上，只有state保持链式命名空间，比如，store.state.module[key]等等,所以如果是子模块的state，直接用辅助函数mapState是获取不到的.