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>
  • 相关阅读:
    sql count中加条件
    zero-copy总结
    问题诊断神器arthas
    rabbitmq 消息确认
    HttpRunner安装笔记(1)安装环境准备:pyenv安装
    centos7 安装rabbitmq3.4.1-1
    centos7 python2.7.5 升级python3.6.4
    测试面试必会sql(1)
    mysql5.6 无法远程连接问题解决
    Katalon 学习笔记(一)
  • 原文地址:https://www.cnblogs.com/caoleyun/p/12693149.html
Copyright © 2011-2022 走看看