zoukankan      html  css  js  c++  java
  • vuex 中的 action

     action 在 vuex 中用于异步 commit 的发送 

    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  , n ) {
                  state.count += n;
            },
            minus (state) {
                state.count--;
            }
        },
        actions : {
            add(context,payload){
                $.get("api.txt",function(data){
                    context.commit('add',Number(data));
                });
            }
        }, 
      //另一种写法
    //*  actions: {
    //*    add ({commit},args) {
    //*    $.get("api.txt",function(data){
    //*       
    commit('add',Number(data));
    //*    });
    //* }

    getters : { nansheng : state
    => { return state.student.filter((item)=>{ return item.sex == "男"; }) } } }); export default store;

    .vue文件

    <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,
                    n : 0
                }
            },
            computed : {
                count(){
                    return this.$store.state.count;
                },
                nansheng (){
                    return this.$store.getters.nansheng
                }
            },
            methods : {
                addhandler(){
                    this.$store.dispatch("add");  //添加的数字写在文本文件中了,是异步读取的,所以不能直接commit
                },
                minusnandler(){
                    this.$store.commit("minus");
                }
            }
        }
    </script>
  • 相关阅读:
    js中eval详解
    javascript数组操作大全
    JavaScript面向对象编程深入分析
    IBatisNet系列二QuickStart篇
    IBatis.Net系列Mapped Statements的语法
    MonoRail学习-入门实例篇
    IBatisNet系列执行存储过程
    IBatis.Net系列多参数的SQL语句的配置
    Castle Startable Facility 简单理解
    wxPython创建系统托盘
  • 原文地址:https://www.cnblogs.com/caoleyun/p/12693173.html
Copyright © 2011-2022 走看看