Vuex

2018-10-11  本文已影响0人  真的吗_a951

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一样创建一个新的文件使代码模块化

    mutations: {
        函数名(state){}//参数是state
}

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

actions:{
    事件名: function(context){//参数是context
        return context.commit('  ')
    }
}
  1. 在组件上添加调用事件
    this.$store.dispatch(' ')

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


getters:{
    函数名(){
        处理函数
    }
}

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

上一篇下一篇

猜你喜欢

热点阅读