整理--vuex的工作流程

工作流程

• 前提：通过点击 + 按钮，对现有的数字2进行+1的操作，然后对这个正在进行的数字进行存储共享

• vue组件当有数据想要进行存储时，那么就调用dispatch这个api，给dispatch传递一个在Actions中用到的方法key--jia，再传递需要改变的参数，如 store.dispatch('jia',2)

  // 经过actions中转
  this.$store.dispatch('jia',this.selectNum)
  ​
  // 直接从state传给mutations
  this.$store.commit('JIA',this.selectNum)
  ​
  //可以直接在html里直接用vuex的state里的内容
  <h1>当前求和为：{{$store.state.sum}}</h1>

• 然后dispatch就通知Actions对象的 jia 方法，如果需要调取ajax，也可以在Actions下调取

• 然后调取 commit api去通知Mutations 去改变数据 ，如 store.commit('jia',2)

  jia(context,value){ }====》

  • context是一个精简的store

  • 

  • value就是在页面调的时候传的数值

  context.commit('JIA',value)====》

  • 参数 ’JIA‘ 是调用的Mutations 的方法

  • 因为context是一个精简的store，所以就写成了context.commit

  const actions = {
      //响应组件中加的动作
      jia(context,value){
          // console.log('actions中的jia被调用了',miniStore,value)
          context.commit('JIA',value)
      },
  }

• 然后在 Mutations 里 调用 ’jia‘，进行 逻辑改变 ，如 state.sum+=2

  JIA(state,value){} ====》

  • 参数 state 指的就是store里的state

  const mutations = {
      JIA(state,value){
          console.log('mutations中的JIA被调用了',state,value);
          state.sum+=value
      },

• 然后vux就会自动同步State的数据

• 然后State数据一旦改变，就会重新渲染（Render）组件

Actions Mutations State三者放在store.js去存放，因为dispatch，commit都是调用store的api