全局操作vuex的state数据

2020-03-05  本文已影响0人  布卡卡的晴空

html直接通过$store.state.数据名来获取

js中 是通过this.$store.state.数据名正常情况 必须 dispatch (action)--->action去commit触发 mutation-->mutation里面才能修改state全局数据

methods:{
addCount(){
this.$store.dispatch('countAction')
}
} 
export default new Vuex.Store({
  state: {
   count: 100
  },
   mutation: {
      countMutation(state){
        console.log('mutation触发了',state)
    state.count++
     }
   },
   action:{
     countAction() {
      consloe.log('action触发了',obj)
       }
 obj.commit('countMutation')
}
})

action--->mutation--->修改state

也可以跳过 action 去 直接 commit mutation-->修改state全局数据

methods:{
addCount(){
this.$store.commit('countMutation')
}
} 
export default new Vuex.Store({
  state: {
   count: 100
  },
   mutation: {
      countMutation(state){
        console.log('mutation触发了',state)
    state.count++
     }
   }
})

state => 负责存储状态

mutations => 负责同步更新状态

actions => 负责获取 处理数据(如果有异步操作必须在action处理 再到mutation), 提交到mutation进行状态更新

上一篇 下一篇

猜你喜欢

热点阅读