import { createStore } from 'vuex'
import axios from "axios"

export default createStore({
  state: {
    //随便写一个状态,状态的初始值为0,可以把状态理解为数据的意思
    counter:10

  },
  getters: {
    //数据过滤
    getCounter(state){ //getCounter(){}函数的函数名getCounter是自己命名的,作用是先把数据读过来
      return state.counter > 0 ? state.counter : "counter数据不满足条件" //state的数据满足大于0就返回该数据,否则返回'counter数据不满足条件'
    }
    //其他组件来访问的时候,是访问getters里面的getCounter
  },
  mutations: {
    //写一个方法,方法名自己命名
    addCounter1(state){//方法里面写一个函数,函数里面有一个state对象
      state.counter-- //比如让拿到的state数据自加1,前提是要调用这个addCounter方法,通过事件调用,这个方法名是自己命名
    },
    addCounter2(state){
      state.counter -= 2
    },
    //可以传参,在其他组件(文件)调用这个方法时,还需要传进来一个num参数
    addCounter3(state,num){
      state.counter += num
    },
    addCounter4(state,num){
      state.counter += num
    }
  },
  //action跟上面的mutions用法相似,唯一的特点就是action可以包含异步操作,比如网络请求
  actions: {
    //参数的写法使用对象的解构赋值的写法{ commit }
    asyncAddCounter({ commit }){
      //网络请求,即看看action能不能处理网络请求
      axios.get("http://iwenwiki.com/api/generator/list.php")
      //.then拿网络请求的数据
      .then(res =>{
        //利用这个网络请求把数据先传给mutations,注意这里的数据不是前端页面传过来的,而是网络请求传过来的
        //通过commit调用上面写的addCounter4方法。res.data拿到的是数组,我们只拿数组里的第一个数据，把这个数据作为参数传给addCounter4方法
        commit("addCounter4",res.data[0])
      })
    }

  },
  modules: {
  }
})