vuex使用方法

小范围的使用相邻或者父子组件传值
组件间共享数据的方式
父向子传值：v-bind属性绑定
子向父传值：v-on 事件绑定
兄弟组件之间共享数据：EventBus
$on 接受数据的那个组件
$emit发送数据的那个组件

频繁的使用大范围的数据共享
使用vuex统一管理状态的好处
1、能够在vuex中集中管理共享的数据，易于开发和后期维护。
2、能够高效地实现组件之间的数据共享，提高开发效率。
3、存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步。

什么样的数据适合存储到Vuex中
1、一般情况下，只有组件之间共享的数据，才有必要存储到vuex中，对于组件中的私有数据，依旧存储在组件自身的data中即可。

vuex是为了保存组件之间的共享数据而诞生的。如果组件之间有要共享的数据可以直接放入vuex中而不必通过父子组件之间传值，如果把组件的数据不需要共享，此时这些不需要的私有的数据没有必要放入vuex中。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {//存储仓库的初始数据
    num:1
  },
  mutations: { //存放修改仓库数据的方法  可以配合 commit 来修改state里面的数据
    updata(state){
     state.num++
      console.log(111)
    }
  },
  actions: {//存放一些修改仓库数据的方法 异步
  asyncIncrement({state,commit}){//异步增加count值  通过结构的方式结构出state,commit 
    setTimeout(()=>{
      //再次提交一个mutations里面的同步行为
      this.commit('increment',2)
    },3000)
  }
  },

  modules: {
  },
  getters:{//相当于组件的计算属性 基于statr里面的数据计算出来的
      yong(state){
        return function(){//返回一个函数可以接受传过来的参数
          return 11
        }
      },
      yongLength(state,getters){//可以把getters属性当做参数传递过来，如果有重复的方法便于调用
        return getters.yong
      }
  }
})

 this.$store.commit('updata')
      console.log(this.$store.getters.yongLength())

      // 在提交mutations选项里定义的行为时只能传递一个数据
     this.$store.commit('increment',3)
      // 在提交时能传递多个数据
     this.$store.commit({
        type:"increment",
         numb1:3,
        numb2:4,
        numb3:5
     })

      // 提交actions选项里面定义的行为
      this.$store.dispatch('asyncIncrement')

commit 执行 mutations里面的同步方法修改数据
dispatch 执行 actions里面的异步方式修改数据