zoukankan      html  css  js  c++  java
  • vuex 配置 getters

    在store中如果有依赖于state的值而改变的,相当于是store的computed,此时可以在store中增加一个getters配置项:

    store.js

    import Vue from "vue";
    import Vuex from "vuex";
    
    Vue.use(Vuex);
    const store = new Vuex.Store({
        //这里的state必须是JSON,是一个对象。
        state: {
            count: 0 ,        //这里就是初始值的罗列,
            student : [
                {"name" : "小1" , "sex" : "男" },
                {"name" : "小2" , "sex" : "女" },
                {"name" : "小3" , "sex" : "男" },
                {"name" : "小4" , "sex" : "女" }
            ]
        },
        //突变,罗列所有可能改变state的方法
        mutations: {
            //没有所谓的大写字母的Type了,就是一个一个函数
            add (state) {
                  state.count++;
            },
            minus (state) {
                state.count--;
            }
        },
        getters : {
            nansheng : state => {
                return state.student.filter((item)=>{
                    return item.sex == "男";
                })
            }
        }
    });
    
    export default store;

    组件中使用this.$store.getters.**来获得这个值。

    <style scopoed>
     
    </style>
    
    <template>
        <div>
            我是子组件
            <h1>
                <button v-on:click="minusnandler">减少</button>
                {{count}}
                <button v-on:click="addhandler">增加</button>
            </h1>
            <h1>
                {{nansheng}}
            </h1>
        </div>
    </template>
    
    <script>
        export default {
            data(){
                return {
                    m : 6
                }
            },
            computed : {
                count(){
                    return this.$store.state.count;
                },
                nansheng (){
                    return this.$store.getters.nansheng;
                }
            },
            methods : {
                addhandler(){
                    this.$store.commit("add");
                },
                minusnandler(){
                    this.$store.commit("minus");
                }
            }
        }
    </script>
  • 相关阅读:
    上有传参下传json的接口调用
    通过群号,获取到群成员信息,下载头像到指定文件夹
    django模型 之 Meta
    k8s 日志的收集
    systemctl 管理服务
    安装JumpServer
    1 nginx的配置详解
    十六 RBAC
    python3 与linux间的小知识
    解决问题:OSError: mysql_config not found
  • 原文地址:https://www.cnblogs.com/caoleyun/p/12693149.html
Copyright © 2011-2022 走看看