import Vue from 'vue'
import Vuex from 'vuex'
import {ADD_MUTATION,SUBN_MUTATION,ADD_MUTATION_ASY,SUBN_MUTATION_ASY} from './mutation-types'

//内置Logger插件
import createLogger from 'vuex/dist/logger'

Vue.use(Vuex)


//插件
const myPlugin = store => {
  //当store初始化后调用
  store.subscribe((mutation, state) => {
      //每次mutation之后调用
      //mutation的格式为 { type, payload }
      console.log(mutation,state);
  })
}



const store = new Vuex.Store({

    // plugins: [myPlugin], //这行先注释掉,方便用代码演示下一行的代码

    plugins: [createLogger()],//内置Logger插件

    strict: process.env.NODE_ENV !== 'production', //严格模式


    //定义数据
    state: { //state中存放的是全局共享的数据,任何组件都能访问这里的state数据
      count: 1,
      num:10,
    },


    //修改数据
    mutations:{

      //严格模式下的表单处理
      updateNum(state,num){
        state.num=num;
      },

      add(state){
        //修改state里面的count数据
        state.count++;
      },
      addN(state,num){
        state.count+=num;
      },
      addN2(state,zidiingyi){
        state.count+=zidiingyi.num;
      },
      sub(state){
        state.count--;
      },
      subN2(state,zidiingyi){
        state.count-=zidiingyi.num;
      },
      subN(state,num){
        state.count-=num;
      },




      //mutation变量写法 加法
      [ADD_MUTATION](state){
        state.count+=4;
      },

      //mutation变量写法 减法
      [SUBN_MUTATION](state,zidiingyi){
        state.count-=zidiingyi.num;
      },

      //action异步,不带参
      [ADD_MUTATION_ASY](state){
        state.count+=6;
      },

      //action异步,带参
      [SUBN_MUTATION_ASY](state,num){
        state.count-=num;
      },


      //action异步第二种写法,这里演示带参数的
      subN_A(state,num){
        state.count-=num;
      },
    },


    //进行异步
    actions:{
      //触发Action的第一种方式,不带参数
      addAsync(context){
        //异步
        setTimeout(() => {
          // 触发哪个mutation,比如触发上面的ADD_MUTATION
          context.commit(ADD_MUTATION_ASY)
        }, 2000)
      },

      //触发Action的第一种方式,带参数
      addNAsync(context,num){
        setTimeout(() => {
          context.commit(SUBN_MUTATION_ASY,num)
        },2000)
      },


      //触发Action的第二种方式,这里演示带参数的
      subNAsync(context,num){
        setTimeout(() => {
          context.commit('subN_A',num)
        }, 2000);
      }


    },



    //加工数据
    getters:{
      showCount(state){
        //注意下面那行用了ES6的新语法``
        return `当前count数据x2是: ${state.count*2}`
      },
      showCount2(state){
        //注意下面那行用了ES6的新语法``
        return `当前count数据x1是: ${state.count*1}`
      }
    },


    //module管理,当模块比较多时,即state数据比较多时,就会使用模块管理
    modules:{
      //城市模块
      cityModules:{
        namespaced: true, //命名空间。会在控制台的$store里面的mutations里面多出来一个cityModules/changeCity
        state:{ //这个state只属于当前的城市模块
          cityId:'001',
          cityName:'北京'
        },
        mutations:{ //也可以在这里使用mutation
          changeCity(state,payload){
            state.cityName=payload;
          }
        },
        actions:{ //actions也可以
          changeCityAsync(context,name){
            console.log(context);
            setTimeout(() => {
              context.commit('changeCity',name) //触发自己城市模块的mutations,即changeCity
            }, 2000);
          },

          //context实例
          someAction({commit,getters,rootGetters,dispatch},name){ //把commit解构出来,在setTimeout异步里面直接使用。按需解构
            setTimeout(() => {
              commit('changeCity',name) //直接使用,不需要在前面加context.
            }, 2000);

            //访问局部的getters
            getters.getCity; //需要解构getters。随便访问一个局部的getCity试试
            //访问全局的getters
            rootGetters.showCount; //需要解构rootGetters。随便访问一个全部的showCount试试

            //使用dispatch触发同模块里面的action
            dispatch('changeCityAsync','内蒙古')

            //使用dispatch触发全局模块里面的action
            dispatch('addAsync',null,{root:true})


          }
        },
        getters:{ //getters也可以
          getCity(state){
            return state.cityName+',欢迎你';
          },

          //module访问全局数据
          someGetter (state,getters,rootState,rootGetters){
            // state.cityName
            // getters.someOtherGetter
            // rootGetters.someOtherGetter
            console.log(state,getters,rootState,rootGetters);
          }
        }
      },
      //用户模块
      userModules:{
        namespaced: true, //命名空间。会在控制台的$store里面的mutations里面多出来一个userModules/changeName
        state:{ //这个state只属于当前的城市模块
          userId:'001',
          userName:'张三'
        },
        mutations:{ //也可以在这里使用mutation
          changeName(state,name){
            state.userName=name;
          }
        },
        actions:{ //actions也可以
          changeUserAsync(context,name){
            setTimeout(() => {
              context.commit('changeName',name) //触发自己城市模块的mutations,即changeCity
            }, 2000);
          }
        },
        getters:{ //getters也可以

        }
      }
    }

  })


  export default store;