美文网首页
全局操作vuex的state数据

全局操作vuex的state数据

作者: 布卡卡的晴空 | 来源:发表于2020-03-05 15:01 被阅读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进行状态更新

相关文章

  • vuex 用法 精炼版

    vuex 可理解为vue项目中用于全局存储数据的仓库 state 数据存放位置this.$store.state...

  • Vuex

    vuex 是 vue 中的全局状态管理;简单的理解就是在vuex中的属性state中定义了数据之后,可以在任意组件...

  • 2020常见vue面试题

    什么是vuex?在那种场景下使用? vuex是全局状态管理工具,它有以下几个核心部分组成: state:存储数据;...

  • 五分钟入门vuex

    vuex主分为state,getters,mutations,actions。 state主要用于储存全局值,如果...

  • vuex

    # Vuex基本结构 > State中的数据 -render-> 渲染到组件上 -进行操作 dispatch-> ...

  • 【融职培训】Web前端学习 第7章 Vue基础教程11 vuex

    一、Vuex概述 二、基于Vuex的计数器 我们不能直接修改state,需要定义mutation来操作state,...

  • vuex的基本结构

    Vuex基本结构 State中的数据 -render-> 渲染到组件上 -进行操作 dispatch-> acti...

  • vuex

    1.什么是vuex vuex是vue中的全局状态管埋插件。可以在整个项目中生成一棵单一的数据树,所有的 state...

  • vuex里面的this.$store.dispatch 和 th

    两个方法都是传值给vuex的mutation改变state dispatch:异步操作,数据提交至 actions...

  • 在vuex里怎么更改数据?

    获取数据: vuex中$store.state是可以获取vuex仓库的数据,vuex仓库的数据是共享的,不管是顶级...

网友评论

      本文标题:全局操作vuex的state数据

      本文链接:https://www.haomeiwen.com/subject/bdjllhtx.html