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>