Vuex Getter分析
发布时间：2023-04-19 10:03:50 所属栏目：教程 来源：
导读：Vuex 允许我们在 store 中定义 “getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，而且只有当它的依赖值发生了改变才会被重新计算。— 官方定
|
Vuex 允许我们在 store 中定义 “getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，而且只有当它的依赖值发生了改变才会被重新计算。— 官方定义 我们可以把 Getter 理解成是封装好的获取数据的方法，在方法内部我们可以对 state 中的数据做一些相应的处理，最后返回我们想要的数据。 通过属性访问 Getter 接受 state 作为其第一个参数，我们可以对 state 中的数据做相应的处理，最终返回我们想要的数据： <!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width, initial-scale=1.0"> <Meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <div v-for="item in skillList" :key="item.name">{{item.name}}</div> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vuex@3.1.2/dist/vuex.js"></script> <script type="text/javascript"> const store = new Vuex.Store({ state: { name: '句号', age: , skill: [ {name: 'Vue', type: }, {name: 'React', type: }, {name: 'JAVA', type: }, {name: 'Webpack', type: }, {name: 'Node', type: } ] }, getters: { skillList: state => { return state.skill.filter(item => item.type === ) } } }) var vm = new Vue({ el: '#app', store, computed: { skillList() { return this.$store.getters.skillList } } }) </script> </html> 代码解释： JS 代码第 16-20 行，我们定义了 Getter 方法 skillList，skillList 内部我们返回状态 skill 中 type 为 1 的数据。 JS 代码第 26-28 行，我们通过 $store.getters 获取 skillList 的返回值。 Getter 也可以接受其他 getter 作为第二个参数： <!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width, initial-scale=1.0"> <Meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <div v-for="item in skillList" :key="item.name">{{item.name}}</div> <div>我有 {{count}} 个技能包</div> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vuex@3.1.2/dist/vuex.js"></script> <script type="text/javascript"> const store = new Vuex.Store({ state: { name: '句号', age: , skill: [ {name: 'Vue', type: }, {name: 'React', type: }, {name: 'JAVA', type: }, {name: 'Webpack', type: }, {name: 'Node', type: } ] }, getters: { skillList: state => { return state.skill.filter(item => item.type === ) }, skillCount: (state, getters) => { return getters.skillList.length }, } }) var vm = new Vue({ el: '#app', store, computed: { skillList() { return this.$store.getters.skillList }, count() { return this.$store.getters.skillCount } } }) </script> </html> 代码解释 JS 代码第 16-23 行，我们定义了 Getter 方法 skillList 和 skillCount，skillList 内部我们返回 skill 数据 中 type 为 1 的数组，skillCount 内部我们通过 getters 获取 skillList 的数组长度。 JS 代码第 28-30 行，我们通过 $store.getters 获取 skillList 的返回值。 JS 代码第 31-33 行，我们通过 $store.getters 获取 skillCount 的返回值。 通过方法访问 在上一个例子中我们只能通过 skillList 获取 type 为 1 的数据列表，那么如果我想获取 type 为 2 的数据呢？同学们可能会说：我们在定义一个 skillList2 不就好了！确实这样可以满足需要，但是，如果又有 type = 3、type = 4 等等其他的呢？难道我们还要继续写 skillList3、skillList4 吗？ 其实 getter 除了可以直接返回数据之外，也可以通过让 getter 返回一个函数，来实现给 getter 传参。在对 store 里的数组进行查询时非常有用。 示例： <!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width, initial-scale=1.0"> <Meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <div v-for="item in skillList" :key="item.name">{{item.name}}</div> <div>我有 {{count}} 个技能包</div> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vuex@3.1.2/dist/vuex.js"></script> <script type="text/javascript"> const store = new Vuex.Store({ state: { name: '句号', age: , skill: [ {name: 'Vue', type: }, {name: 'React', type: }, {name: 'JAVA', type: }, {name: 'Webpack', type: }, {name: 'Node', type: } ] }, getters: { skillList: state => (type) => { return state.skill.filter(item => item.type === type) }, skillCount: (state, getters) => (type) => { return getters.skillList(type).length }, } }) var vm = new Vue({ el: '#app', store, computed: { skillList() { return this.$store.getters.skillList() }, count() { return this.$store.getters.skillCount() } } }) </script> </html> 代码解释： JS 代码第 17-19 行，我们定义了 Getter 方法 skillList，skillList 返回一个函数，该函数接收一个 type 参数，函数内部返回 state.skill 中对应 type 的数组。 JS 代码第 20-22 行，我们定义了 Getter 方法 skillCount，skillCount 返回一个函数，该函数接收一个 type 参数，函数内部获取 getters.skillList 的值，并返回数组长度。 JS 代码第 28-30 行，我们通过 $store.getters.skillList 传入参数 type 获取 skillList 的返回值。 JS 代码第 31-33 行，我们通过 $store.getters.skillCount 传入参数 type 获取 skillCount 的返回值。 （编辑：汽车网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
