Vuex

store

用来管理状态,共享数据,在各个组件之间管理外部状态

流程:view-->action-->mutations-->state-->view

传递数据

使用vuex传递数据
需要先安装vuex (npm insatall vuex)
1.在main.js中引入Vuex ,并通过use使用它

    import Vuex from 'vuex'
    Vue.use(Vuex)

2.创建状态仓库

    var store = new Vuex.Store({
      state:{
            //要共享的数据
            num: 99
      }
})
  1. 通过this.$store.state.num直接拿到需要的数据

改变状态(mutations) 可以像router一样创建一个新的文件使代码模块化

  • 第一种方法 (mutation)
    1.在状态仓库里面创建mutation改变状态函数
    mutations: {
        函数名(state){}//参数是state
}

2.在组件上添加调用事件
this.$store.commit('mutation的函数名')
注意commit里面的函数名必须用引号包裹

  • 第二种方法(action)
    actions 只能对mutation进行操作
actions:{
    事件名: function(context){//参数是context
        return context.commit('  ')
    }
}
  1. 在组件上添加调用事件
    this.$store.dispatch(' ')

对比:
mutations参数是state,action参数是context
action可以异步操作,mutations只能同步操作


  • getters选项
    通过getters创建函数管理状态
    1.在状态管理里添加getters
getters:{
    函数名(){
        处理函数
    }
}

2.组件上调用
this.$store.getters.函数名

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 8,033评论 0 7
  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 8,319评论 0 6
  • vuex 场景重现:一个用户在注册页面注册了手机号码,跳转到登录页面也想拿到这个手机号码,你可以通过vue的组件化...
    sunny519111阅读 12,458评论 4 111
  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应...
    白水螺丝阅读 10,118评论 7 61
  • vuex是一个状态管理模式,通过用户的actions触发事件,然后通过mutations去更改数据(你也可以说状态...
    Ming_Hu阅读 6,151评论 3 3

友情链接更多精彩内容