1.前言
这次还梳理不完,明天再补上吧
后续主要就是 优化 拆分了
2. getters概念
有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数
computed: { doneTodosCount () { return this.$store.state.todos.filter(todo => todo.done).length } }
如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想
解决方案
Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算
3. demo 数据
store.js
对用户数据做个初步处理 筛选出
vip用户
state: { todos: [ { text: "吴京", vip: true }, { text: "沈腾", vip: false }, { text: "关晓彤", vip: true }, { text: "毛不易", vip: false } ] }, getters: { vipTodos(state) { // ********************************* 简洁写法 return state.todos.filter(v => v.vip) // ***************************过滤写法 // return state.todos.filter(v => { // return v.vip // }) } },
getters类似组件中的computed依赖于state创建的共享属性该方法对
state数据处理
4. 常规使用
computed:{ ...mapState(["todos"]), getT(){ return this.$store.getters.test }, getVipTodos(){ return this.$store.getters.vipTodos } }
模板
<h1>所有用户</h1> <ul> <li v-for="(v, i) in todos" :key="i"> <span>{{ v.text }}</span> <span v-if="v.vip">VIP用户</span> </li> </ul> <hr/> <h1>会员用户</h1> <ul> <li v-for="(v, i) in getVipTodos" :key="i"> <span>{{ v.text }}</span> </li> </ul>
5. 辅助函数
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：
computed:{ ...mapState(["todos"]), ...mapGetters(["vipTodos"]), }
用法
和之前的
mutions和actions一样
<h1>会员用户</h1> <ul> <li v-for="(v, i) in vipTodos" :key="i"> <span>{{ v.text }}</span> </li> </ul>
6. 辅助函数 别名
使用对象形式
...mapGetters({ // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount` doneCount: 'doneTodosCount' })
