vuex基本使用state,getters,actions,mou..

 

• state：存储状态（变量）
• getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()
• mutations：修改状态，并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。
• actions：异步操作。在组件中使用是$store.dispath('')
• modules：store的子模块，为了开发大型项目，方便状态管理而使用的。这里我们就不解释了，用起来和上面的一样。

import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex)
const mutations = {
  mutationsAddCount (state, n = 0) {
    debugger
    state.unm2 = (state.unm2 + n)
  }
}
const actions = {
  actionAddCount (state, n = 0) {
    // state.unm2 = state.unm2 + n
    this.commit('mutationsAddCount', n)
  }
}
const getters = {
  gettersAddCount (state) {
    return (state.unm2 + 10)
  }
}
export default new vuex.Store({
  state: {
    unm2: 10
  },
  mutations,
  actions,
  getters
})

 mounted () {
    this.$store.commit('mutationsAddCount', 19)
    this.$store.dispatch('actionAddCount', 10)}

  <h1>state num:{{$store.state.unm2}}</h1>
      <h1>state num:{{$store.getters.gettersAddCount}}</h1>