import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

import Vue from 'vue'

import Vuex from 'vuex'

import state from './state'

//import mutations from './mutations'

//import actions from './actions'

//注册vuex到vue中

Vue.use(Vuex)

// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)

//创建一个vuex.store()实例,得到一个仓库对象

//export default new Vuex.Store

export default new Vuex.Store({

    state:{

//        state想象成组件中的data,专门用来存储数据

//如果在组件中,想要访问store中的数据,智能通过this.$store.state.xxx来访问

        count:

    },

    mutations:{

//        注意:如果要操作store中的state值,只能通过调用mutations提供的方法,才能操作对应的数据,不能直接操作对应的数据

//不推荐直接操作state中的数据,因为导致了数据的混乱,不能快速的定位到错误的原因,因为,每个组件都可能有操作数据的方法

//提供一个函数增加

        increment(state){

            state.count++

        },

//        subtrat(state,{c:3,d:2}){

////            state.count--

//

//        }

    subtrat(state,obj){

        console.log(obj)

        state.count-=(obj.c+obj.d)

        }

//        注意:如果组件要调用mutations中的方法,只能使用this.$store.commit('increment')

//只能使用this.$store.commit('方法名')和this.emit（'父组件的方法名'）类似

//this.$store.commit('方法名',参数)最多有两个参数，参数1是state状态，参数2是通过commit提交过来的参数

},

        getters:{

//            注意:这里的getters只负责对外提供数据,不负责修改数据,如果想要修改stae中的数据,清去找mutations

//            对比:发现getter中的方法,和组件中的过滤器比较类似,因为过滤器和getters都没有修改原数据

//            都是把原来的数据做了一层的包装,提供给了调用者

//            其次,getters和computed比较像,只要state中的数据发生变化了,那么,如果getters正好也引用了这个数据,那么就会立即触发getters的

            optCount:function(state){

                return '当前最新的count值是'+state.count

            }

        }

})

//总结:

//state中的数据不能修改,如果要修改,必须通过mutations

//如果组件想要直接从state中获取数据,需要this.$store,state.xxx

//如果组件想要修改数据,必须使用mutations提供方法,需要通过this.$store.comit('方法的名称',唯一的一个参数)

//如果state中的state上的数据在对外提供的时候需要做一层包装,那么推荐使用getters,如果需要使用getters,则用this.$store.getters.xxx

 // The Vue build version to load with the `import` command

 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.

 import Vue from 'vue' /* 这里是引入vue文件 */

 import App from './App'/* 这里是引入同目录下的App.vue模块 */

 import router from './router'/* 这里是引入vue的路由 */

 import Vuex from 'vuex'

 import store from './vuex/index'

 //引入UI组件

 import MintUI from 'mint-ui'

 import 'mint-ui/lib/style.css'

 Vue.use(MintUI)

 import axios from 'axios'

 Vue.prototype.$http = axios

 Vue.config.productionTip = false

 /* eslint-disable no-new */

 new Vue({

   el: '#app',/* 定义作用范围就是index.html里的id为app的范围内 */

   router,/* 引入路由 */

   store,/* 将vuex创建的store挂载到Vm实例上 ，只要挂载到vm上，任何组件都能使用store来存取数据*/

   components: { App },/* 给Vue实例初始一个App组件作为template 相当于默认组件 */

   template: '<App/>'/* 注册引入的组件App.vue */

 })

<template>

  <div class="hello">

      <input type="button"  value="减少" @click="remove"/>

    <input type="button"  value="添加" @click="add"/>

  <!--    <input type="button"  value="添加" >-->

      <br/>

      <input type="text" v-model="$store.state.count" />

  </div>

</template>

<script >

    export default{

        data(){

            return{

            }

        },

        componets:{

        },

        methods:{

            add(){

//                console.log(this);s

                this.$store.commit("increment")

            },

            remove(){

                this.$store.commit("subtrat",{c:3,d:2})

            }

//            var that=this;

//            that.$store.commint("increment")

        }

//        不推荐，不符合vuex的设计理念，因为这个数据是公共的，这样会导致数据混乱，难以维护

//        methods:{

//            add(){

//                this.$store.state.count++

//            }

//        }

    }

</script>

 <template>

     <div id="">

         <h1>当前的数量为{{$store.getters.optCount}}</h1>

     </div>

 </template>

 <script>

 </script>

 <style>

 </style>