vuex调用后台数据

//该文件用于创建vuex中的store

//引入vuex
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios';
import { nanoid } from 'nanoid';
//使用插件
Vue.use(Vuex);
//猪备actions--用于响应组件中的动作
const actions={
    // jia:function (context,vaule) {
    //     context.commit("JIA", vaule)
    // },
    // jian: function (context, vaule) {
    //     context.commit("JIAN", vaule)
    // },
    jiaOdd: function (context, vaule) {

        if (context.state.sum%2) {
            context.commit("JIA", vaule)
        }   
    },
    jiaWate: function (context, vaule) {
        setTimeout(() => {
            context.commit("JIA", vaule)
        }, 500);
    },
    addPersonServer(context){
        axios.get('https://api.uixsj.cn/hitokoto/get?type=hitokoto').then(
            response=>{
                context.commit('ADD_PERSON', { id: nanoid(), name: response.data})
            },
            error=>{
                alert(error.messgae)
            }
        )
    }


}

// 准备mutations--用于操作数据（state）
const mutations = {
    JIA:function (state,value) {
        state.sum+=value;
    },
    JIAN: function (state, value) {
        state.sum -= value;
    },
    ADD_PERSON(state, value){
        state.personList.unshift(value)
    }
}

//准备state--用于存储数据
const state = {
    sum: 0,//当前的和
    address:"beijing",
    subject:"qianduan",
    personList:[
        {id:"001",name:"xiaobai"}
    ]
}

//用于将state中的数据进行加工
const  getters={
    bigSum(state){
        return state.sum*10
    }
}
//创建store
const store=new Vuex.Store({
    actions: actions,
    mutations: mutations,
    state: state,
    getters: getters
});



//导出store

export default store

<template>
    <div>
        <h1>人员列表</h1>
        <input type="text" placeholder="请输入名字" v-model="name"/>
        <button @click="add">添加</button>
        <button @click="addPerson">添加一个人随便名字</button>
        <ul>
            <li v-for="p in $store.state.personList" :key="p.id">{{p.name}}</li>
        </ul>
    </div>
</template>

<script>
import {nanoid} from 'nanoid'
export default {
    name:"Person",
    mounted() {
    },
    data() {
        return {
            name:""
        }
    },
    methods: {
        add(){
            const personObj={id:nanoid(),name:this.name}
            console.log(personObj)
            this.$store.commit("ADD_PERSON",personObj)
            this.name=""
        },
        addPerson(){
            this.$store.dispatch('addPersonServer')
        }

    },

}
</script>

<style>

</style>