zoukankan      html  css  js  c++  java
  • Vuex之理解Getters的用法

    一.什么是getters
    在介绍state中我们了解到,在Store仓库里,state就是用来存放数据,若是对数据进行处理输出,比如数据要过滤,一般我们可以写到computed中。但是如果很多组件都使用这个过滤后的数据,比如饼状图组件和曲线图组件,我们是否可以把这个数据抽提出来共享?这就是getters存在的意义。我们可以认为,【getters】是store的计算属性。

    二.操作

    通过属性访问,通过方法访问:

    在storestore.js

    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
     
    export default new Vuex.Store({
        //创建一个对象来保存应用启动时的初始状态
        state:{
             // 应用启动时, count置为0
            count:0,
            todos: [
                { id: 1, text: '水果类', done: true },
                { id: 2, text: '苹果', done: true },
                { id: 3, text: '苹果', done: false}
            ]
        },
        getters: {
            doneTodos: state => {//通过方法访问
              return state.todos.filter(todo => todo.done)
            },
            doneTodosCount: (state, getters) => {//通过属性访问
                return getters.doneTodos.length
              }
        }
    })

    vueDome.vue 

    <template>
        <div>
            <P>通过属性访问:{{doneTodosCount}}</p>
            <P>通过方法访问:{{todos}}</p>
        </div>
    </template>
     
    <script>
    /*
    1.mapState 辅助函数
    当映射的计算属性的名称与 state 的子节点名称相同时,
    我们也可以给 mapState 传一个字符串数组
    */
    import { mapState } from 'vuex'
    export default {
        computed:{
            todos:function() {  //通过方法访问
                return this.$store.getters.doneTodos;
            },
            doneTodosCount () {
                return this.$store.getters.doneTodosCount
            }
        }
    }
    </script>

    三.mapGetters 辅助函数

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

    <template>
        <div>
            <h4>测试1:Count is {{count}}</h4>
            <P>通过属性访问:{{doneTodosCount}}</p>
            <P>通过方法访问:{{doneTodos}}</p>
        </div>
    </template>
    <script>
    import {mapGetters} from 'vuex'
    export default {
        computed:{
            count(){
                return this.$store.state.count
            },
            ...mapGetters([
                'doneTodos',
                'doneTodosCount'
            ])
        }
    }
    </script>

    效果同上。分析:1...mapGetters表示// 使用对象展开运算符将 getters 混入 computed 对象中

    2.mapGetters里面的都是store.js里面的getters的方法名

  • 相关阅读:
    微信小程序 生命周期
    ftp uploadFileAction(重要)
    java FTP 上传下载删除文件
    httpsession
    db2 blob EMPTY_BLOB()
    java blob
    java session getCreationTime()
    eclipse 查看源代码
    java file类
    Vue.js 和 MVVM 小细节
  • 原文地址:https://www.cnblogs.com/xtjatswc/p/10324917.html
Copyright © 2011-2022 走看看